Question

我在这里有这些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将类“active”添加到第一个 H2 标记，然后每个例如 2秒，切换“active”类从第一个 H2 标签到第二个 H2 标签再到第三个......当到达最后一个H2标签时，它将再循环到第一个< strong> H2 ，无限。请指教。感谢。

Answer 1

您需要使用setInterval启动处理更改的计时器。 Here's a working fiddle

$(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()。

Answer 2

您可能希望在while循环中使用setTimeout。您将在变量中保留索引，并且每次迭代都将删除活动类，增加索引，将活动类添加到新索引。冲洗，重复。当索引的大小与h2标记的数量相同时，请将其设置为零。

Answer 3

$(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/

Answer 4

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

jQuery将css类分配给循环中的div

4 个答案: