我一直试图让这段代码工作一段时间,但无法弄清楚出了什么问题.它适用于带有图像的三态翻转.(我知道我可以用CSS做到这一点,所以请不要回答.)目标是,我正在努力学习jquery,作为学习的一部分,我试图找出我在这里缺少的东西.
我遇到的问题是当你执行mouseover和mouseout事件时按钮正确突出显示.但是,当我单击按钮然后单击另一个按钮时,我单击的所有按钮都会保留.我需要能够像点击每个图像一样切换开启状态,就像典型的标签控件一样.
我知道有更好的方法可以做到这一点,但我真的想知道我做错了什么,我极度沮丧.因此,如果有任何人可以帮助专门修复我发布的代码,我会非常感激.再一次,我知道这可以通过某些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>
你必须做你认为应该做的事情:)(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;
});
});