Question

我目前有一个小功能，可以在单击导航项目符号时在2个位置添加/删除一个类（它从子弹本身添加/删除.active以及从匹配的div中添加一些信息）。

是否可以将它与自动添加/删除.active类（在两个地方）相结合，比如10秒？

$(document).ready(function() {
    $('.case-1').addClass('active');
    $('#case-1').addClass('active');

$("#carousel-nav ul li").click(function() {
    $('#carousel-nav ul li.active').not(this).removeClass('active');
    $(this).addClass('active');

var divClass = $(this).attr('id')
    $('div').removeClass('active');
    $('.' + divClass).addClass('active');
    });

});

Answer 1

编辑：第一次误解了这个问题，所以这是另一个镜头：

已更新 jsfiddle

＆＃13;

setInterval(function(){ 
   // toggle the class every 
   $('div').toggleClass('blue');  
   setTimeout(function(){
     // toggle another class
     $('div').toggleClass('red');  
   },2000)

},2000);

＆＃13;

.blue{
  color: blue;
}
.red{
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
testing 123
</div>

＆＃13;

将其包裹在：

中

setTimeout(function(){
   //actions to perform
}, 3000);

将 3000 替换为您想要的时间

请参阅jsfiddle

Answer 2

你可以尝试调用一个函数来递归地切换你的类

$(document).ready(function() {
    var num = 0;
    var cases = [to the max number of cases]
    var activateToggling = function(cases) {
       num=num+1;
       $('.case-'+(num-1)).toggleClass('active');
       $('#case-'+(num-1)).toggleClass('active');
       $('.case-'+num).toggleClass('active');
       $('#case-'+num).toggleClass('active');
       if(num==cases){
            num=1;
       }  
       setTimeout(activateToggling(cases), 3000);
    }
})

在X秒之后添加/删除类

2 个答案: