0

我怎样才能拥有它,以便每次单击按钮时数组都迭代一次?如果我再次单击它,它应该显示第二个数组元素等,直到它遍历整个数组。

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/

谢谢!

4

4 回答 4

2

既然您正在使用,jQuery那么您可以尝试(不要混淆香草jsaddEventListener

$(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 而不是图像。

演示。(图像正在附加,但对于您的大按钮,这些是不可见的。)

于 2013-10-12T15:59:19.117 回答
1

使用闭包:

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 闭包是如何工作的?

于 2013-10-12T16:08:01.553 回答
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++]);
});
于 2013-10-12T15:50:00.607 回答
1

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

});
于 2013-10-12T15:53:10.527 回答