Question

我怎樣才能讓它每次單擊按鈕數組迭代通過一次？如果我再次點擊它，它應該顯示第二個數組元素等，直到它遍歷整個數組。

的JavaScript：

var images = [ 
    "<img src='first.png' />", 
    "<img src='second.png' />", 
    "<img src='third.png' />", 
    "<img src='kitten.png' />" 
]; 

var button = document.getElementsByClassName("btn-lg")[0]; 

button.addEventListener("click", function(){ 
    for(i = 0; i < 5; i++) {  
     jQuery('.row.text-center').append(images[i]); 
    }  
}); 

HTML：

<div class="row text-center"> 
    <button type="submit" class="btn btn-lg btn-info">Click Here!</button> 
</div> 

的jsfiddle：http://jsfiddle.net/KVs6S/1/

謝謝！

Answer 1

外部化計數器：

var i=0, images = [ 
    "<img src='first.png' />", 
    "<img src='second.png' />", 
    "<img src='third.png' />", 
    "<img src='kitten.png' />" 
]; 

jQuery('.btn-lg').on("click", function(){ 
    if (i>=images.length) return; 
    jQuery('.row.text-center').append(images[i++]); 
}); 

Answer 2

讓我變量從0開始的，並RESP增加它。當lenght比圖像greather數 - 重啓：

var i = 0; 
var button = document.getElementsByClassName("btn-lg")[0]; 

button.addEventListener("click", function(){ 
    if (i == 4) { i = 0; /* OR return; to stop */ } 
     jQuery('.row.text-center').append(images[i++]); 

}); 

Answer 3

由於您使用jQuery，那麼你可以嘗試（不要混淆香草js liike addEventListener）

$(function(){ 
    var images = [ 
     "http://imageshack.us/a/img9/6564/3qv9.png", 
     "http://imageshack.us/a/img9/4521/3dmc.png", 
     "http://imageshack.us/a/img28/3608/1x6h.png", 
     "http://imageshack.us/a/img850/1713/5i6g.png" 
    ]; 

    $(".btn-lg").on("click", function(){ 
     if(images.length) { 
      var img = $('<img/>', { 'src':images.pop() }); 
      $('.row.text-center').append(img); 
     } 
    }); 
}); 

此外，Array.pop()就足夠了這隻需要保存url而不是數組中的圖像。

DEMO.（圖片越來越添加數據，但你的大按鈕，這些都是不可見）

Answer 4

使用閉包：

function yield(lenArray) { 
    var i=0; 
    console.log("outer",lenArray); 
    return function() { 
    if (i<lenArray) { 
    console.log("inner",i); 
    jQuery('.row.text-center').append(images[i++]); 
    } 
    } 
} 

button.addEventListener("click", yield(5)); 

How do JavaScript closures work?