圖像交換點擊jQuery的，3張圖片

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

一個簡單的解決方法是在單擊處理使用具有一個計數器變量數組，然後遍歷它像

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

要避免污染全局名稱空間我將使用如下所示的閉包。檢查小提琴 - 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]; 
    } 
})());