图像交换单击jquery，3个图像

Question

到目前为止，我希望能够得到原始的图像并循环再循环两个图像，但是我不知道如何添加额外的图像。

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

}});

Answer 1

一个简单的解决方案是使用一个带有计数器变量的数组，然后在单击处理程序中循环它，如下所示

​

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

为了避免污染全局命名空间，我将使用如下闭包。检查小提琴- 小提琴.

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