javascript - JQuery：使用 on('click') 遍历数组

Question

我正在尝试进入 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++;});

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

Answer 1

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

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

这是一些示例代码：

$(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
    });
});

我希望这有帮助！

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

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

Answer 4

我想朝相反的方向循环：

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

它有效，但它跳过了一个值......

Answer 5

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