javascript - 一次仅将 jquery 脚本应用于一个类

Question

如何一次将此脚本应用于一个班级

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


});

当我单击动作类时，所有卡片类都会翻转，我想一次旋转一个。

我的想法是单击一张并仅翻转那张，单击另一张并仅翻转那张卡，而不是同时翻转所有卡。

Answer 1

使用延迟

$('.action').click(function(){
    $('.card').each(function(i, el) {
        setTimeout(function(){ $(this).addClass('flip'); }, i*300);
    });
});

Answer 2

如果您只想翻转.card包含您单击的操作的 div，请执行以下操作：

    $('.action').click(function(){;
        $(this).closest(".card").addClass('flip');
    });

Answer 3

如果你想在点击时切换一个类，你可以使用 toggleClass()。

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

现在，如果您想一次翻转一个。确切地知道你想要什么有点困难。我猜你想要这样的东西。

$('.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");
});

Answer 4

您可以使用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);
});