4

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

4 に答える 4

10

これは1行で実行できます。toggleClassを使用します：

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

CSSを正しく実行すれば、liveEventsクラスを削除する必要はありません。liveEventsActiveクラスに必要なものを上書きさせるだけです。

于 2012-02-01T16:22:45.670 に答える
4

コードを使用すると、関数全体が3秒ごとに実行されます。追加/削除クラスは1つのブロックで発生し、明らかに違いを確認することはできません。

jQueryには、指定されたクラスを適宜追加/削除する.toggleClass（）メソッドがあります。

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

デモ

于 2012-02-01T16:23:56.183 に答える
4

関数が実行されるたびに、次の 4 つのことを行っています。これにより、基本的に開始状態に戻ります。

  • クラスを削除liveEvents
  • クラスを追加liveEventsActive
  • クラスを削除liveEventsActive
  • クラスを追加liveEvents

これら 2 つのクラスのオン/オフを切り替えたいので、.toggleClass()関数を見てみましょう。また、2 つのセレクターが必要です。1 つはクラスで要素を選択するためのもので、もうliveEvents1 つはクラスで要素を選択するためのものliveEventsActiveです。

于 2012-02-01T16:19:50.743 に答える
1 
$(document).ready(function() {
    function moveClass(){
        $( ".liveEvents" ).switchClass( "liveEvents", "liveEventsActive", 1000);
        $( ".liveEventsActive" ).switchClass( "liveEventsActive", "liveEvents", 1000 );
   }

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

これにより、トランジションを使用してクラスが交換されます。これが役立つことを願っています

于 2012-02-01T16:33:50.947 に答える