图片交换点击jQuery，3张图片

Question

I want to be able to get the original image and cycle through 2 more images back to it so far I have this, but I dont know how to add an extra image

  $('img').on({'click': function() {
    var src = ($(this).attr('src') === '1.png') // current image
        ? '2.png' 
       : '1.png';
   $(this).attr('src', src);

}});

Answer 1

One easy solution is to use an array with a counter variable and then loop over it in the click handler like

 var images = ['//placehold.it/64/ff0000?text=1.png', '//placehold.it/64/00ff00?text=2.png', '//placehold.it/64/0000ff?text=3.png'], counter = 0; $('img').on({ 'click': function() { counter = ++counter >= images.length ? 0 : counter; $(this).attr('src', images[counter]); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="//placehold.it/64/ff0000?text=1.png" /> 

Answer 2

To avoid polluting global namespace I would use a closure as below. Check fiddle - Fiddle .

$('img').on('click', (function() {
    var arr = [ ... paths to your images];
    return function() {
        var current = arr.indexOf( this.src );
        current--;
        this.src = current > 0 ? arr[ current ] : arr[0];
   }
})() );