0

我有一组 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 循环有什么问题？

4

2 回答 2

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

解释

当你运行这个循环时，每个元素都有一个延迟显示。delay->show 立即为每个元素运行。出于这个原因，您需要不断增加延迟，以使它们看起来是同步绑定在一起的。第一个延迟是 500ms，第二个是 1s，第三个是 1.5s，等等。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;
   }
})
于 2013-03-11T08:38:44.870 回答
1

.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/

于 2013-03-11T08:52:51.377 回答