jquery - 带有 setInterval 的 jquery addClass 和 removeClass

Question

我想每 3 秒更改一次班级名称。但它不起作用。我怎样才能做到这一点？

$(document).ready(function() {
        function moveClass(){
            var x = $('.liveEvents');
            x.removeClass('liveEvents');
            x.addClass('liveEventsActive');
            x.removeClass('liveEventsActive');
            x.addClass('liveEvents');
       }

        setInterval(moveClass, 3000); 
        return false;
    });

Answer 1

您可以在一行中完成此操作。使用切换类：

setInterval(function(){$('.liveEvents').toggleClass('liveEventsActive')}, 3000);

如果您正确地使用 CSS，则无需删除liveEvents该类。只需让liveEventsActive课程覆盖您需要的内容。

Answer 2

每次函数运行时，您都在做四件事，这实际上将您带回了开始状态：

• 删除类liveEvents
• 添加类liveEventsActive
• 删除类liveEventsActive
• 添加类liveEvents

你想打开/关闭这两个类，所以看看这个.toggleClass()函数。您还需要两个选择器，一个选择带有liveEvents类的元素，一个选择带有类的元素liveEventsActive。

Answer 3

使用您的代码，整个函数每 3 秒执行一次。添加/删除类发生在一个块中，您显然看不到差异。

jQuery 有一个.toggleClass()方法，可以相应地添加/删除指定的类：

function moveClass() {
    $('.liveEvents')
        .toggleClass('liveEventsActive');
}

演示

Answer 4

$(document).ready(function() {
    function moveClass(){
        $( ".liveEvents" ).switchClass( "liveEvents", "liveEventsActive", 1000);
        $( ".liveEventsActive" ).switchClass( "liveEventsActive", "liveEvents", 1000 );
   }

    setInterval(moveClass, 3000); 
    return false;
});

这将使用转换交换您的课程，希望这会有所帮助