Question

有人可以告诉我这里的错误吗？

<script type="text/javascript">
(document).ready(function() {

$j("img.sswap").click(function() {
      $j("img.sswap").each(function() {
            this.src = this.src.replace("_on", "_off");
      });
      this.src = this.src.replace("_on", "_off");
});

});
</script>

<div id="navigation">
<ul>
<li><a href="#d1"><img class="sswap" src="img/d1_off.png"></a></li>
<li><a href="#d2"><img class="sswap" src="img/d2_off.png"></a></li>
<li><a href="#d3"><img class="sswap" src="img/d3_off.png"></a></li>
<li><a href="#d4"><img class="sswap" src="img/d4_off.png"></a></li>
</ul>
</div>

Answer 1

如果您只是想切换单个图像的开/关状态，那么Alfie-101的答案将适合您。但是，通过阅读您的代码，您可能只希望一次“打开”一个图像。看起来你正试图关闭所有图像，然后打开“点击”点击的图像。您的代码中最大的问题是您的最后一行应该将“off”替换为“on”而不是“on”更改为“off”。因此，如果您希望所有图像都“关闭”，请将代码更改为以下内容：

$(document).ready(function() {
    $("img.sswap").click(function() {
        $("img.sswap").each(function() {
            this.src = this.src.replace("_on", "_off");
        });
        this.src = this.src.replace("_off", "_on");
    });
});

工作jsFiddle：http://jsfiddle.net/Z8WNZ/

Answer 2

在不知道您真正想要发生什么的情况下，此代码似乎会交换每个图像，而是单击的图像。首先，循环遍历与绑定相同的选择器并交换它的所有内容。然后重新交换单击的那个，将其恢复到原始状态。

我无法相信你真正想要发生的事情，可能你应该删除each循环。

Answer 3

应该这样做！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="navigation">
<ul>
<li><a href="#d1"><img class="sswap" src="img/d1_off.png"></a></li>
<li><a href="#d2"><img class="sswap" src="img/d2_off.png"></a></li>
<li><a href="#d3"><img class="sswap" src="img/d3_off.png"></a></li>
<li><a href="#d4"><img class="sswap" src="img/d4_off.png"></a></li>
</ul>
</div>
<script type="text/javascript">

$(function() {
    $("img.sswap").toggle(
        function() { 
        var src = $(this).attr("src").replace("_off", "_on");
        $(this).attr("src", src);
    },
    function() {
        var src = $(this).attr("src").replace("_on", "_off");
        $(this).attr("src", src);
    });
});
</script>

Jquery图像交换导航问题

3 个答案: