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

我希望这有帮助！

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函数循环数组。循环时将数组值与文本框中的值进行比较。获得匹配项时 - 将文本框的值更改为循环中的下一个数组值，然后退出循环。

JQuery：使用on（＆＃39; click＆＃39;）遍历数组

5 个答案: