Question

我有一组5个元素，如单选按钮，我想要将延迟设置为每个元素。

    <input type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">

并在标题上添加了此脚本：

<script>
   $(document).ready(function(){
      for(var i=1; i<6; i++){
          $('input[name=slider]:nth-child(i)').attr('checked', ').delay(500);
      }
   })
</script>

但没有选择。在for循环中我错了什么？

Answer 1

我认为这可能就是你所追求的：

http://jsfiddle.net/

$(document).ready(function(){
      for(var i=1; i<6; i++){
          $('input[name=slider]:nth-child('+i+')').delay(i*500).show(function() { $(this).prop('checked', true)});
      }
   })

<强>说明

运行此循环时，每个元素都会显示延迟。延迟 - ＆gt; show立即针对每个元素运行。因此，您需要不断增加延迟，以使它们看起来同步绑定在一起。第一个延迟是500毫秒，第二个是1秒，第三个是1.5秒等。show调用中的函数是一个回调，告诉复选框添加属性checked = true。

基于你对@Juhana的评论：我会说这是你最好的选择（或稍微修改一下）：

http://jsfiddle.net/vSFtM/5/

$(document).ready(function(){
    setInterval(function() { nextIteration(); }, 500);
    var current_index = 1;
    var total = 5;
    function nextIteration() {
      $('#slide'+current_index).prop('checked', true);
      current_index = current_index + 1 > total ? 1 : current_index + 1;
   }
})

Answer 2

.delay()仅由jQuery动画队列使用，它实际上不会暂停脚本执行。原始代码依次（立即）检查每个单选按钮并暂停其动画队列（为空）0.5秒。

这是一个适用于任意数量的单选按钮，并且没有来自.delay()的开销：

$(document).ready(function () {
    $('input[name=slider]').each(function (index) {
        var $this = $(this);
        setTimeout( function() {
            $this.prop('checked', true);
        }, 500 * index );
    });
});

演示：http://jsfiddle.net/kmJkP/

在jquery中，这个for循环的错误是什么？

2 个答案: