Question

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

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

我知道有更好的方法可以做到这一点，但我真的想知道我做错了什么，而且我极度受挫。因此，如果有任何人可以帮助专门修复我发布的代码，我会非常感激。再一次，我知道这可以通过某些css技术来完成，但我想了解我在这里做错了什么。

提前致谢。

$(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>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</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>

Answer 1

你必须做你认为你应该做的事情:)（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;
    });
});

有人可以请帮助这个Jquery代码

1 个答案: