Question

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

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

}});

Answer 1

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

为了避免污染全局命名空间，我将使用如下的闭包。检查小提琴 - 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];
   }
})() );

图像交换点击jquery，3张图片

2 个答案: