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

您可以在一行中执行此操作。使用toggleClass：

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

<强> DEMO

Answer 4

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

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

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

jquery addClass和removeClass with setInterval

4 个答案: