JQuery的:通过使用通过迭代的阵列(“点击”)(JQuery: Iterate through

2019-09-03 04:54发布

我试图进入JQuery的,但我周围挣扎了一下。

我想要做的就是去通过阵列点击一次,这样每次我点击“下一步”按钮,将新项目呈现。

让我们来看看下面的代码:

$(document).ready(function(){
    var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<stuff.length;i++)
    {
        console.log(stuff[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点击功能循环数组。 虽然循环比较数组值,什么是在文本框中。 当你得到一个匹配 - 在文本框中的值更改为在循环的下一个数组值,然后退出循环。



文章来源: JQuery: Iterate through an array by using on('click')