Question

好的，我在下面的代码中仍然存在一些问题。我收到了一些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>

Answer 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呢？

仍然遇到jquery图像翻转问题

1 个答案: