0

好的，我仍然对下面的这段代码有一些问题。我从一些 SO 用户那里得到了一些指导，我对此表示感谢。

但是，我仍然对我在这里做错了什么感到困惑。我有一个使用图像的基本翻转 jquery 脚本。但是，当用户单击其中一个图像时，我希望该图像保持“活动/单击”状态。如果单击另一个图像，我希望该图像处于“活动/单击”状态，并且先前活动/单击的图像返回到关闭状态。

基本上，我希望它像选项卡控件 Off、On、Active 一样工作。下面的代码适用于点击的例外情况。当我单击图像时，它会变为“活动”。但是当我单击另一个图像时，它不会切换先前单击的图像，因此我最终将所有图像都处于“活动”状态。我已经尝试了我能想到的一切，并在谷歌上搜索了答案，但我尝试的一切最终都得到了相同的结果。单击而不是切换时，所有图像都保持“活动”状态。

有人可以看看并帮助我弄清楚我在这里缺少什么。我刚开始使用 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>
4

1 回答 1

1

好吧 - 您的点击功能将需要查看所有图片#nav以查看点击了哪一张并将其关闭。

代替：

$(this).children("img").each(function() {
            this.src = $(this).attr("src").replace(/_clk.gif$/ig,"_off.gif");

        });

尝试：

$("#nav").find("img").each(function() {
  this.src = this.src.replace(/_clk\.gif$/i, "_off.gif");
});

另外-需要指出的两件事：首先，该.字符应\.在您的正则表达式中转义。第二：如果你使用 this.src = 为什么不直接替换 this.src 呢？

于 2009-08-04T20:24:24.790 回答