JQuery：使用on（’click’）遍历数组

我想进入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 

Answer 4

我想循环相反的方向：

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

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

Answer 5

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