Question

Look at this sample code:

<a class="change" href="#" id="swap01"><img src="off.gif"></a></div>
<a class="change" href="#" id="swap02"><img src="off.gif"></a></div>
<a class="change" href="#" id="swap03"><img src="off.gif"></a></div>

<form>
<input type="hidden" name="field01" value="0" />
<input type="hidden" name="field02" value="0" />
<input type="hidden" name="field03" value="0" />
</form>

What I want to happen is that, for example, if I click on the image link within swap02:

1) The image source for that link changes from off.gif to on.gif
2) The corresponding hidden field in the form (field02) changes from 0 to 1.

When I click the same link again, it reverts back to off.gif and 0.

Just three are given as an example, but this needs to be scalable (up to 99 items).

Thanks a lot. 🙂

Answer 1

Try –

$("a[id^='swap']").click(function(e) {
    e.preventDefault();
    var $img = $("img",this);
    $img.attr("src") == 'off.gif' ? $img.attr("src","on.gif") : $img.attr("src","off.gif");
    var $hf = $("input[name='field" + this.id.replace('swap','') + "']");
    $hf.val() == '1' ? $hf.val('0') : $hf.val('1');
})

Demo – http://jsfiddle.net/dwE78/