JQuery：使用 on('click') 遍历数组答案

【问题标题】：JQuery: Iterate through an array by using on('click')JQuery：使用 on('click') 遍历数组
【发布时间】：2013-05-09 02:07:21
【问题描述】：

我正在尝试使用 JQuery，但有点挣扎。

我要做的是一次单击一次通过一个数组，以便每次单击“下一步”按钮时都会显示一个新项目。

我们来看看下面的代码：

$(document).ready(function(){
    var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<stuff.length;i++)
    {
        console.log(stuff[i]);
    }  
});

现在我是怎么想的，比如用 i 创建一个 while 循环

$("#next").on('click', function(){i++;});

但这不知何故不起作用。谁能以相对简单的方式向我解释如何做到这一点？

【问题讨论】：

循环不响应用户交互。它总是完全运行。

标签： javascript jquery for-loop onclick while-loop

【解决方案1】：

当您使用 for 语句运行循环时，它会立即执行此操作，而不是响应事件。

相反，您希望在每次单击时逐步遍历数组。为此，您需要在 click 函数之外定义一个计数器，并在每次点击时递增（或重置，如果您已到达数组的末尾）。

这里是一些示例代码：

$(function () { // this is a shortcut for document ready
    var stuff = ['house', 'garden', 'sea', 'cat'],
        counter = 0;

    console.log(stuff[counter]); // your initial value

    // the next line, of course, assumes you have an element with id="next"
    $('#next').click(function () {
        counter = (counter + 1) % stuff.length; // increment your counter
        // the modulus (%) operator resets the counter to 0
        // when it reaches the length of the array

        console.log(stuff[counter]); // the new incremented value
    });
});

我希望这会有所帮助！

【讨论】：

【解决方案2】：

只需在回调之外保留一个计数器，并在每次点击时递增：

$(document).ready(function(){
    var i = 0;    
    var stuff =["house","garden","sea","cat"]; 
    $("#next").on('click' function(){
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });
});

【讨论】：

简短跟进：添加“%stuff.length;”的目的是什么？
@Peter：% 是模块运算符。如果i 等于stuff.length (4 % 4 = 0)，i 将被重置为0。这通常用于在遍历数组时“环绕”，否则您将继续增加 i 并且数组中不存在此类元素。

【解决方案3】：

$(document).ready(function(){
   var currentPos = 0;

   $("#next").click(function()
   {
      currentPos++;
      printThings(currentPos);
   });
});

function printThings(maxLength)
{
   maxLength = maxLength > stuff.length ? stuff.length : maxLength;
   var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<maxLength;i++)
    {
        console.log(stuff[i]);
    }  
}

【讨论】：

【解决方案4】：

我想反方向骑车：

$("#prev").on('click', function(){
        stuff.reverse();
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });

它可以工作，但它会跳过一个值...

【讨论】：

【解决方案5】：

我会在表单中添加一个文本框。然后，在您的#next click 函数上循环数组。循环时将数组值与文本框中的值进行比较。当您获得匹配时 - 将文本框的值更改为循环中的下一个数组值，然后退出循环。

【讨论】：

这听起来很复杂，如果您可以将值存储在变量中，为什么还要使用文本框？ OP 甚至没有提到他们正在使用表单。