jquery addClass и removeClass с помощью setInterval

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

С вашим кодом вся функция выполняется каждые 3 секунды. Класс добавления / удаления находится в одном блоке, и вы, очевидно, не видите разницы.

jQuery имеет метод .toggleClass () , который соответственно добавит / удалит указанный класс:

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

DEMO

Answer 3

Каждый раз, когда запускается функция, вы выполняете четыре действия, которые по существу возвращают вас в исходное состояние:

• Удалить класс liveEvents
• Добавить класс liveEventsActive
• Удалить класс liveEventsActive
• Добавить класс liveEvents

Вы хотите включить / выключить эти два класса, поэтому взгляните на функцию .toggleClass(). Вам также понадобятся два селектора, один для выбора элементов с классом liveEvents и один для выбора элементов с классом liveEventsActive.

Answer 4

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

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

это поменяет ваши классы с помощью переходов, надеюсь, это поможет