jquery - 循环通过一组按钮

Question

我编写了一个小脚本，循环遍历一组按钮，每个按钮都分配了一个功能。脚本如下：

$('#play').bind('click', function() {
    setTimeout( function(){ $('#b12').click(); }, 0 );
    setTimeout( function(){ $('#b13').click(); }, 2500 );
    setTimeout( function(){ $('#b14').click(); }, 5000 );
});

现在这工作正常，但我试图使它更自动化一点，而不是仅仅使用“setTimeout”调用每个函数。我有下面的代码，但我认为我做错了什么：

$('#play').click(function(){ 
    $('.buttons').each(function(){
        var time = 0;
        setTimeout( function(){ $(this).click(); }, time );
        time+= 2500;
    });
});

这是有问题的HTML：

<button id="b12" class="buttons" onclick="oct12()">12th</button>
<button id="b13" class="buttons" onclick="oct13()">13th</button>
<button id="b14" class="buttons" onclick="oct14()">14th</button>

<button id="play">play</button>

Answer 1

您可以为此使用 .each 的索引，在您自己的代码中，您每次迭代都会重置时间

   $('#play').click(function(){
       $('.buttons').each(function(i){
        setTimeout( function(){ $(this).click(); }, i * 2500);                
       });

  });

演示

Answer 2

将time变量放在 .each() 之外，如下面的代码：

$('#play').click(function(){ 
    var time = 0;
    $('.buttons').each(
        setTimeout( function(){ $(this).click(); }, time );
        time+= 2500;
    });
});

Answer 3

您可以使用插件 jquery-timing之类的东西。这使得计时问题变得非常容易：

$('#play').bind('click').$('#b12,#b13,#b14').each($).click().wait(2500);

而已。

此示例使用插件的内联版本 bind()、顺序循环版本 each()和延迟方法wait(timeout)。

PS：我喜欢写 .on('click') 而不是 .bind('click') 因为它读起来像句子一样流利。