0

私はここにこれらのhtml構造を持っています、

<div class="myCaption">
 <h2>caption 1</h2>
 <h2>caption 2</h2>
 <h2>caption 3</h2>
 <h2>caption 4</h2>
 <h2>caption 5</h2>
</div>

jqueryを使用してクラス「アクティブ」を最初のH2タグに追加し、たとえば2秒ごとに、「アクティブ」クラスを最初のH2タグから2番目のH2タグに、次に3番目に切り替える方法を考えています.. ...最後の H2 タグに到達すると、最初のH2に無限にループします。お知らせ下さい。ありがとう。

4

4 に答える 4

5

setInterval変更を処理するタイマーを開始する には、を使用する必要があります。これが実用的なフィドルです

$(function(){ 
    //get all of the h2 tags.
    var h2s = $('.myCaption h2');

    //set up a counter
    var counter = 0;

    //start the interval
    setInterval(function(){

       //remove any active classes you have on the h2s.
       h2s.removeClass('active');

       // update the counter, use a modulo on it with the number of
       // h2 tags to find an index. Get the jquery object at that index, 
       // and add the class to that.
       h2s.eq(counter++ % h2s.length).addClass('active');

    }, 2000); //2000 milliseconds = 2 seconds.
});

編集：@Christopheに感謝します。忘れていましeq()た。

于 2012-11-21T04:17:57.920 に答える
1

おそらく、while ループ内でsetTimeoutが必要になるでしょう。変数にインデックスを保持し、反復ごとにアクティブなクラスを削除し、インデックスをインクリメントし、アクティブなクラスを新しいインデックスに追加します。すすぎ、繰り返します。インデックスが h2 タグの数と同じサイズの場合は、ゼロに設定します。

于 2012-11-21T04:17:50.243 に答える
1 
$(document).ready(function() {
    'use strict';
    var activeCaption = 0,
        switchCaption = function switchCaption() {
            var captions = $('div.myCaption > h2'),
                count = captions.length - 1;
            captions.removeClass('active');
            captions.eq(activeCaption).addClass('active');
            if (activeCaption < count) {
                activeCaption += 1;
            } else {
                activeCaption = 0;
            }
            window.setTimeout(switchCaption, 2000);
        };
    switchCaption();

});​

実際のデモ: http://jsfiddle.net/NPRzM/

于 2012-11-21T04:23:08.553 に答える
0 
setInterval(function() {
        var current = $('div.myCaption > h2.active'),
            next = current.next().length?current.next():$('div.myCaption > h2').eq(0);
        current.removeClass('active');
        next.addClass('active');
    },2000);

デモ: http://jsfiddle.net/NPRzM/3/

[更新]セレクターをキャッシュする、わずかに効率的なバージョン:

(function(h2s){
setInterval(function() {
    var current = h2s.filter('.active'),
        next = current.next().length?current.next():h2s.eq(0);
    current.removeClass('active');
    next.addClass('active');
},2000);
})($('div.myCaption > h2'));
于 2012-11-21T04:44:36.043 に答える