javascript - 单击按钮时逐个遍历数组元素

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

既然您正在使用，jQuery那么您可以尝试（不要混淆香草js味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 而不是图像。

演示。（图像正在附加，但对于您的大按钮，这些是不可见的。）

Answer 2

使用闭包：

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

JavaScript 闭包是如何工作的？

Answer 3

外部化计数器：

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 4

将i设为从 0 开始的变量并分别递增。当长度大于图像计数时 - 重新启动：

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

});