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

如何使每次单击按钮时，数组都迭代一次？如果我再次单击它，它将显示第二个数组元素，等等，直到它遍历整个数组

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

var图像=[
"",
"",
"",
""
];
var按钮=document.getElementsByClassName（“btn lg”）[0]；
addEventListener（“单击”，函数（）{
对于（i=0；i<5；i++）{
jQuery（'.row.text center'）.append（images[i]）；
}       
});

HTML:

点击这里！

jsfiddle：

---

谢谢

将计数器外部化：

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

var i=0，图像=[
"",
"",
"",
""
];
jQuery（'.btn lg'）。打开（“单击”，函数（）{
如果（i>=images.length）返回；
jQuery（'.row.text center'）.append（images[i++]）；
});

将计数器外部化：

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

var i=0，图像=[
"",
"",
"",
""
];
jQuery（'.btn lg'）。打开（“单击”，函数（）{
如果（i>=images.length）返回；
jQuery（'.row.text center'）.append（images[i++]）；
});

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

});

---

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

});

---

既然您使用的是

jQuery

，那么您可以尝试一下（不要混淆vanilla

js

liike

addEventListener

）

$（函数（）{
变量图像=[
"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”）。在（“单击”，函数（）{
如果（图像长度）{
变量img=$（'
另外，这就足够了，只需在数组中保留URL而不是图像

（图像会被追加，但是对于你的大按钮，这些图像是不可见的。）
既然你使用的是
jQuery
，那么你可以尝试一下（不要把vanilla
js
liike
addEventListener
）

$（函数（）{
变量图像=[
"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”）。在（“单击”，函数（）{
如果（图像长度）{
变量img=$（'
另外，这就足够了，只需在数组中保留URL而不是图像

（图像将被附加，但对于您的大按钮，这些图像不可见。）
使用闭包：

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

函数成品率（lenArray）{
var i=0；
log（“外部”，lenArray）；
返回函数（）{
如果（i使用闭合：

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

函数成品率（lenArray）{
var i=0；
log（“外部”，lenArray）；
返回函数（）{
如果（iI如果你使用Jquery，为什么你仍然坚持使用
addEventListener
？如果你使用Jquery，为什么你仍然坚持使用
addEventListener
？谢谢，但是你能再解释一下吗？我对返回语句感到困惑：/I我以为你想在添加所有图像后停止。这不是你想要的吗？谢谢，但是你能告诉我吗你再解释一下吗？我对返回语句感到困惑：/我以为你想在添加所有图像时停止。这不是你想要的吗？