How to swap between images in jQuery

Question

I have an assignment to create a sliding picture puzzle of sorts, where you can click on each image (which is part of a ninja picture) and an alternate image (parts of a cat picture) appear in its place. A sort of slot machine to match two images. We are supposed to make use of custom attributes (data-alt-src in the code) and make no use of JavaScript variables or any CSS. I am simply not understanding how to make use of custom attributes to swap images. The assignment says not to take longer than 2 hours making this and am far past this. I've been trying variations of the jQuery script to use .attr, but to no avail.

<script>
    $(document).ready(function(){
        $('img').click(function(){
            $(this).slideToggle('data-alt-src');
            $(this).slideToggle();
        })

    })
</script>

<img src='ninja0.png' data-alt-src='cat0.png' />
<br/>
<img src='ninja1.png' data-alt-src='cat1.png' />
<br/>
<img src='ninja2.png' data-alt-src='cat2.png' />
<br/>
<img src='ninja3.png' data-alt-src='cat3.png' />
<br/>
<img src='ninja4.png' data-alt-src='cat4.png' />

have a look here [stackoverflow, similar question[(http://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover) — Billy, Oct 09 '15 at 21:48

score 0 · Answer 1 · answered Oct 09 '15 at 21:53

Try something like this,

<script>
$(document).ready(function() {
     $('img').click(function(){
                if($(this).attr('src')===$(this).data('src1')){
                    $(this).attr('src',$(this).data('src2'));
                }
                else{
                    $(this).attr('src',$(this).data('src1'));
                }
      });

});

</script>

<img src='ninja0.png'' data-src1='ninja0.png' data-src2='cat0.png'/>
<img src='ninja1.png'' data-src1='ninja1.png' data-src2='cat1.png'/>
<img src='ninja2.png'' data-src1='ninja2.png' data-src2='cat2.png'/>
<img src='ninja3.png'' data-src1='ninja3.png' data-src2='cat3.png'/>

How to swap between images in jQuery

1 Answers1