0

このスクリプトを一度に 1 つのクラスだけに適用するにはどうすればよいですか

<script>

    $(document).ready(function(){



        // set up click/tap panels
        $('.click').toggle(function(){

            $(this).addClass('flip');
        },function(){
            $(this).removeClass('flip');
        });

        // set up block configuration
        $('.action').click(function(){;
            $('.card').addClass('flip');
        });
        $('.action2').click(function(){
            $('.card').removeClass('flip');
        });


});

アクション クラスをクリックすると、すべてのカード クラスが反転するので、一度に 1 つずつ回転させたいと思いました。

私の考えは、1 枚をクリックしてその 1 枚だけを裏返し、別の 1 枚をクリックしてそのカードだけを裏返すというものです。同時にすべてのカードをめくるわけではありません。

4

4 に答える 4

1

.cardクリックしたアクションを含む divを反転したいだけの場合は、次のようにします。

    $('.action').click(function(){;
        $(this).closest(".card").addClass('flip');
    });
于 2013-01-23T17:35:48.690 に答える
1

遅延を使用する

$('.action').click(function(){
    $('.card').each(function(i, el) {
        setTimeout(function(){ $(this).addClass('flip'); }, i*300);
    });
});
于 2013-01-23T17:16:31.717 に答える
0

使用できますsetInterval()

ライブデモ

var cards;
index = 0;
var interval1;
function repeat()
{
      cards.eq(index++).addClass('flip');
      if(index  == cards.length)
          clearInterval(interval1);
}
$('.action').click(function(){
    cards = $('.card');
    interval1 = setInterval(repeat, 1000);
});
于 2013-01-23T17:14:56.643 に答える
0

クラス onclick を切り替えたい場合は、toggleClass() を利用できます。

$(document).on("click", ".click", function() {
    $(this).toggleClass('flip');
});

一度に 1 つずつ反転する場合は、次のようにします。自分が何を望んでいるのかを正確に知るのは少し難しいです。私はあなたがこのようなものが欲しいと推測しています。

$('.action').click(function(){;        
    var cards = $('.card');
    var current = cards.filter(".flip").removeClass('flip');
    var next = current.length===1 && next.index()+1<cards.length? current.next() : cards.first();
    next.addClass("flip");
});
于 2013-01-23T17:12:00.063 に答える