jQuery 鼠标悬停事件不起作用

发布于 2024-07-30 01:28:18 字数 2257 浏览 1 评论 0原文

我一直试图让这段代码正常工作一段时间，但无法找出问题所在。它用于带有图像的三态翻转。（我知道我可以用 CSS 做到这一点，所以请不要回答这个问题。）我的目标是，我正在尝试学习 jquery，作为学习的一部分，我试图找出我在这里缺少的东西。

我遇到的问题是，当您执行鼠标悬停和鼠标移出事件时，按钮会正确突出显示。但是，当我单击一个按钮然后单击另一个按钮时，我单击的所有按钮都会保留。我需要能够像典型的选项卡控件一样单击每个图像时切换状态。

我知道有更好的方法可以做到这一点，但我真的很想了解我做错了什么，我感到非常沮丧。因此，如果有人可以帮助专门修复我发布的代码，我将非常感激。再说一次，我知道这可以通过某些 CSS 技术来完成，但我想了解我在这里做错了什么。

<script>
    $(document).ready(function () {
        var clicked_obj;
        $("#nav a").mouseover(function () {
            if ($(this).data("clicked")) { return; }
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_off.gif$/ig, "_on.gif");
            });
        }).mouseout(function () {
            if ($(this).data("clicked")) { return; }
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_on.gif$/ig, "_off.gif");
            });
        }).click(function () {
            if (clicked_obj) {
                $(clicked_obj).removeData("clicked").mouseout();
            }
            clicked_obj = this;
            $(this).data("clicked", true);
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_off.gif$/ig, "_clk.gif");
            });
        });
    });
</script>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
</head>
<body>
    <div id="nav">
        <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div>
        <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0" /></a></div>
        <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
        <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
    </div>
</body>
</html>

原文

I have been trying to get this code to work for a while now and cannot figure out what is wrong. It is for a tri-state rollover with images. (I know that I can do this with CSS so please do not answer with that.) The goal is, I am trying to learn jquery and as part of the learning, I am trying to figure out what I am missing here.

What I am having issues with is when you do the mouseover and mouseout events the buttons highlight correctly. However, when I click on a button then click on another button all the buttons that I click stay on. I need to be able to toggle the on the state as on click each image like a typical tab control.

I know that there are better ways of doing this, but I am really trying to learn what I did wrong and I am extremely frustrated. So if there is anyone out there that can help specifically fix the code I am posting I would really appreciate it. Again, I know that this could be accomplished with certain CSS techniques, but I would like to understand what I am doing wrong here.

<script>
    $(document).ready(function () {
        var clicked_obj;
        $("#nav a").mouseover(function () {
            if ($(this).data("clicked")) { return; }
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_off.gif$/ig, "_on.gif");
            });
        }).mouseout(function () {
            if ($(this).data("clicked")) { return; }
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_on.gif$/ig, "_off.gif");
            });
        }).click(function () {
            if (clicked_obj) {
                $(clicked_obj).removeData("clicked").mouseout();
            }
            clicked_obj = this;
            $(this).data("clicked", true);
            $(this).children("img").each(function () {
                this.src = $(this).attr("src").replace(/_off.gif$/ig, "_clk.gif");
            });
        });
    });
</script>

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<head>
</head>
<body>
    <div id="nav">
        <div id="logo"><img src="images/inbox_wrilogo.gif" width="143" height="30" alt="logo" border="0" /></div>
        <div id="tab"><a href="#"><img src="images/nav_support_off.gif" width="75" height="22" alt="Support" name="support" border="0" /></a></div>
        <div id="tab"><a href="#"><img src="images/nav_acct_off.gif" width="75" height="22" alt="My Account" name="acct" border="0" /></a></div>
        <div id="tab"><a href="#"><img src="images/nav_inbox_off.gif" width="75" height="22" alt="Inbox" name="inbox" border="0" /></a></div>
    </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空袭的梦i 2024-08-06 01:28:18

你必须完全按照你认为应该做的去做:)（jquery 的美妙之处:)...当您单击新按钮时，从先前单击的按钮中删除所选状态...这是一个使用样式的版本图像，但您应该能够更改添加/删除类来更改图像

var sel;
$(document).ready(function() {
    $("#nav a")
    .mouseover(function() {
        $(this).addClass("mouseOver");
    })
    .mouseout(function() {
        $(this).removeClass("mouseOver");
    })
    .click(function() {
        if( sel != null ) {
            $(sel).removeClass("selected");
        }
        $(this).addClass("selected");
        sel = this;
    });
});

You have to do exactly what you think you should do :) (the beauty of jquery :)... remove the selected state from the previously clicked button when you click on a new one.... Here's a version that uses styles instead of images, but you should be able to change the add/remove class to changing the images

var sel;
$(document).ready(function() {
    $("#nav a")
    .mouseover(function() {
        $(this).addClass("mouseOver");
    })
    .mouseout(function() {
        $(this).removeClass("mouseOver");
    })
    .click(function() {
        if( sel != null ) {
            $(sel).removeClass("selected");
        }
        $(this).addClass("selected");
        sel = this;
    });
});

回复收藏 0 原文

~没有更多了~