如何为 class 的每个实例设置不同的间隔值

Question

我创建了一些简单的 CSS 翻转卡片并使用 setInterval 让它们每 2 秒翻转一次。

    setInterval(function()
    {
        $('.flip-card').toggleClass('flip-card-flipped'); 
    }, 2000);

效果不错，但是每张牌都会同时翻转，我想让它们一张接一张地翻转。所以我一直在尝试使用 .each 函数，但是当我使用 .each 时卡片根本不会翻转。

    $(".flip-card").each(function(i, obj) 
    {
        setInterval(function()
        {
            obj.toggleClass('flip-card-flipped');

        },(i * 1000) + 2000);
    });

在这个例子中，翻转动画需要一秒钟，所以上面的代码尝试获取 class 的索引并将其乘以 1000 以获得秒数来抵消间隔。所以第一张牌将在 (0 * 1000) + 2000 之后翻转，下一张将是 (1 * 1000) + 2000 等等，即 2s、3s、4s....

Answer 1

通过阅读文档 https://api.jquery.com/each/，我不清楚如何使用 .each 函数的 obj 参数。在他们的示例中，他们似乎建议改用 this。

此外，您似乎想要一个偏移量，而不是增加后面卡片的间隔。如您所说，间隔应该是所有卡的2s。如果我理解正确的话，唯一的区别应该是他们何时开始翻转周期。如果是这样，那么您需要一个偏移量。

$(".flip-card").each(function(i) {
    setTimeout(() => 
        setInterval(() => $(this).toggleClass('flip-card-flipped'), 2000),
        i * 1000
    );
});

如何为 class 的每个实例设置不同的间隔值

How to set a different interval value for each instance of a class

html

javascript

css

jquery

setinterval