一次只将 jquery 脚本应用于一个类

Apply jquery script to only one class at a time

本文关键字：应用于 一个 脚本 一次 jquery      更新时间：2023-09-26

如何一次仅将此脚本应用于一个类 

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

});

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

我的想法是单击一张并仅翻转

该卡，单击另一张并仅翻转该卡而不是同时翻转所有卡。

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

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

使用延迟

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

点击时切换一个类，你可以利用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");
});
您可以使用

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);
});
相关文章：