Question

我想知道是否有任何方法可以按时间间隔向每个div添加“活动”类，但只有其中一个可以在jquery上的inverval中使用“active”类，如：

<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>

经过一段时间后

<div class="item"></div>
<div class="item active"></div>
<div class="item"></div>

然后......

<div class="item"></div>
<div class="item"></div>
<div class="item active"></div>

我添加了类似的东西但不是我想要的东西：

jQuery('.carousel-inner').mouseenter(function() {
  jQuery('.item').each(function(i) {
var $sh = jQuery(".item");
setInterval(function(){
    $sh.toggleClass("active");
}, 1000);
  });
});

Answer 1

您需要递归使用setInterval或setTimeout。我只是简单地选择setTimeout，因为这保证了上一次操作在下一次操作开始之前完成。

＆＃13;

$(function () {
    
    var index = 1,
        max = $('.item').length;

    function setActive() {
        setTimeout(function () {
            $('.active').removeClass('active');
            index++;
            if(index > max) {
                index = 1;    
            }
            $('.item:nth-of-type(' + index + ')').addClass('active');
            setActive();
        }, 1500);
    }
    
    setActive();
    
});

＆＃13;

div {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background: green;
}
div.active {
    background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>

＆＃13;

之前的代码段只是一个示例。我不确定你的帖子是什么课程，但CSS应该证明你想要完成的事情。

<强> JSFiddle DEMO

Answer 2

＆＃13;

$('div.item').removeClass('active');
$('div.item:eq('+n+')' ).addClass('active');

＆＃13;

其中n是要将活动类添加到

的项目的索引

Answer 3

试

var i=0;

setInterval(function(){

            $(".item.active").removeClass("active");  
            $(".item:eq("+i+")").addClass("active");
            i++;
            if(i>=$(".item").length){
               i=0;
            }

},100);

添加和删除每个div的类

3 个答案:

DEMO

添加和删​​除每个div的类

3 个答案:

DEMO

添加和删除每个div的类