Проблема с навигацией при смене изображения в Jquery

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 будет работать для вас.Однако после прочтения вашего кода вы, похоже, хотите, чтобы только одно изображение было включено одновременно.кажется, что вы пытаетесь отключить все изображения, а затем включить включенное изображение.Самая большая проблема в вашем коде состоит в том, что ваша последняя строка должна заменять «выкл.» На «вкл.» Вместо «вкл.» На «выкл.» Итак, если вы хотите, чтобы все изображения были «выкл», измените код на следующий:

$(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

Это должно сделать это!

<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>

Answer 3

Не зная, что вы на самом деле хотите, этот код может заменить каждое изображение , за исключением того, которое было нажато. Сначала вы перебираете все, что соответствует тому же селектору, что и связывание, и меняете его местами. Затем вы снова меняете тот, на который нажали, и возвращаете его в исходное состояние.

Я не могу поверить, что это то, что вы на самом деле хотите, возможно, вам следует удалить цикл each.