仍然遇到 jquery 图像翻转问题
好吧，我对下面的代码仍然有一些问题。 我收到了一些 SO 用户的指导，我对此表示感谢。
然而，我仍然对我在这里做错了什么感到困惑。 我有一个使用图像的基本翻转 jquery 脚本。 但是，当用户单击其中一张图像时，我希望该图像保持在“活动/单击”状态。 如果单击另一张图像，我希望该图像处于“活动/单击”状态，而之前的活动/单击图像返回到关闭状态。
基本上，我希望它像选项卡控件“关闭”、“打开”、“活动”一样工作。 以下代码适用于点击例外情况。 当我单击图像时，它会变为“活动”。 但是，当我单击另一个图像时，它不会切换之前单击的图像，因此最终所有图像都处于“活动”状态。 我已经尝试了我能想到的一切，并在谷歌上搜索了答案，但我尝试的一切最终都得到了相同的结果。 单击而不是切换时，所有图像都保持“活动”状态。
有人可以看一下并帮助我弄清楚我在这里缺少什么吗？ 我刚刚开始使用 jquery，并且仍在学习中。 顺便说一句，我知道这可以用 CSS 来完成，但因为我正在努力学习，所以我宁愿了解我做错了什么，然后再转向另一种方法。 所以请不要建议我用 CSS 作为答案。 提前致谢。
$(document).ready(function() {
var sel;
$("#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");
});
//handle clicks
}).click(function() {
if( sel != null ) {
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");
});
}
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_on.gif$/ig,"_clk.gif");
})
sel = this;
});
});
</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>
Ok I am still having some issues with this code below. I have received some guidance from some SO users and I appreciate that.
However, I am still perplexed with what I am doing wrong here. I have a basic rollover jquery script using images. However, when the user clicks one of the images I want that image to stay in the “active/clicked” state. If another image is clicked I want that one in the “active/clicked” state and the previously active/clicked image to go back to the off state.
Basically, I want this to work like a tab control Off, On, Active.
The code below works with the exception of the clicks. When I click on the image it turns “active”. But when I click on another image it does not toggle the previously clicked image so I end up with all the images in the “active” state. I have tried everything I can think of and have searched google for the answer but everything I try ends up with the same result. All the images stay “active” when clicked instead of toggling.
Can someone please take a look and help me figure out what I am missing here. I just started with jquery and I am still learning my way around. By the way I know that this can be done with CSS but since I am trying to learn I would rather understand what I am doing wrong then just moving on to another method. So please do not suggest that I do this with CSS as an answer.
Thanks in advance.
$(document).ready(function() {
var sel;
$("#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");
});
//handle clicks
}).click(function() {
if( sel != null ) {
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");
});
}
$(this).children("img").each(function() {
this.src = $(this).attr("src").replace(/_on.gif$/ig,"_clk.gif");
})
sel = this;
});
});
</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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
嗯 - 您的点击函数需要查看
#nav中的所有图像，以了解点击了哪一张并将其关闭。代替：
尝试：
另外 - 需要指出两件事：首先，在正则表达式中应该对
.字符进行转义\.。 第二：如果你正在使用 this.src = 为什么不直接替换 this.src 呢？Well - Your click function will need to look at all the images in
#navto see which one is clicked and turn it off.Instead of:
Try:
Also - Two things to point out: First the
.character should be escaped\.in your regexp. Second: if you are using this.src = why not just replace on this.src as well?