Question

Can someone please tell me what I am doing wrong here?

<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

If you simply want to toggle the on/off state of a single image then Alfie-101’s answer will work for you. However, from reading your code, it looks like you may only want one image to be “on” at a time. it seems like you’re trying to turn “off” all images and then turn “on” the clicked image. The biggest problem in your code is that your last line should be replacing “off” to “on” instead of “on” to “off. So, if you want all images to be “off” then change your code to the following:

$(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");
    });
});

Working jsFiddle: http://jsfiddle.net/Z8WNZ/