Question

I wrote a code that switches an image from Yes to No using jQuery.

$(function() {
    $('#s-ref').click(function(){
        $("#s-img").attr('src',"no.png");
    });
});

html is:

<a href="#" id="s-ref"><img src="yes.png" alt="" id="s-img"></a>

How to modify the jQuery code above so that it switches back and force (yes/no/yes/no/yes…).

Answer 1

Check the img src…

$(function() {
    $('#s-ref').click(function(){
        if ($("#s-img").attr('src') == 'yes.png')
          $("#s-img").attr('src',"no.png");
        else
          $("#s-img").attr('src',"yes.png");
    });
});

Or… This would work if the scr contained ‘yes.png’ for example ‘/foo/barr/yes.png:

$(function() {
    $('#s-ref').click(function(){
        if ($('#s-img[src*="yes.png"]').length > 0)
          $("#s-img").attr('src',"no.png");
        else
          $("#s-img").attr('src',"yes.png");
    });
});

Here’s a fiddle to illustrate the latter answer – http://jsfiddle.net/nz35B/