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 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()就足够了，只需保留网址中的网址而不是图像。

DEMO.（图片正在附加，但是对于您的大按钮，这些图片不可见。）

Answer 2

将计数器外部化：

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 3

使 i 从0开始变量并将其增加。当lenght比图像计数更好时 - 重启：

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 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?

单击按钮时逐个迭代数组元素

4 个答案: