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は、要素ごとにすぐに実行されます。そのため、同期して結合されているように見せるために、遅延を継続的に増やす必要があります。最初の遅延は500ミリ秒、2番目は1秒、3番目は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;
   }
})
于 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 に答える