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

只需在回调之外设置一个计数器,并在每次点击时递增它:

$(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 2

当您使用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
    });
});

我希望这有帮助！