1

これらの要素すべてに次のクラスが定義された13の異なる要素がありますcandidate

現在、これらの同じ要素に対して、次のように 13 の異なるクラスも定義されています。

can1, can2, can3, can4, can5, can6, can7, can8, can9, can10, can11_ can12_can13

各要素のクラスを同時に 5 秒に 1 回程度同時に切り替える必要がありますが、すべてcandidateの要素でクラスを定義したままにして、クラスを変更するだけですcan。また、can1 が定義されている場合を除いて、5 秒ごとに 1 ずつ減少するようにクラスを変更する必要があります。代わりに can13 に切り替わります。そう...

can1 は can13 になり、 can2 は can1 になり、 can3 は can2 になり、... can13 になるまで can12 になる

また、クラスチェンジの際にはそのクラスにもアニメーションを付ける必要があるので、これswitchClassを実現する必要があると考えています。しかし、これを正確に行うための最良かつ最も生産的な方法は何ですか?

次を使用して、すべての要素を一度に取得できます。

$(".candidate").switchClass(... code);

しかし、私は今、古いクラスを取得して新しいクラスに変更することにうんざりしています。

また、クラスdata-classを表す実際の NUMBER を使用して、各要素にa を定義しました。canしたがって、その要素のクラスが のcan1場合data-class、 の値は1、その要素のクラスが の場合can2、data-classその要素の値は2など...

これを有利に利用して、canクラスの最後の数値を5秒ごとに減らすにはどうすればよいですか? switchClassそのため、メソッドにqueueオプションを設定できることに気付きましたが、falseこれはおそらく私が望むものですが、この目的でどのように使用するのですか?? そして、アニメーションのために500ミリ秒のようなものが欲しいですswitchClass

私はこれをしなければなりません.each()か？

4

1 に答える 1

1

クラスが 1 から 13 ではなく 0 から 12 の範囲にある方がよいでしょう。このようにして、剰余算術を簡単に使用できます。それらが 1 から 13 でなければならない場合は、モジュラスを計算した後に加算を行うだけですnextClassId = (currentClassId % 13) + 1;。

setInterval(function() {
   $('.candidate').each(function() {
        var $this = $(this),
            currentClassId =  Number($this.data('class')),
            nextClassId = (currentClassId + 1) % 13;
        $this.switchClass('can' + currentClassId, 'can' + nextClassId);
        $this.data('class', nextClassId);
   });
}, 5000);

ワーキングフィドル、http://jsfiddle.net/7dYXh/

于 2013-08-16T02:43:07.880 に答える