jQuery setInterval

Question

我有一个jQuery函数，它可以翻转一个元素，然后在几秒钟后将其翻转回来，但是有多个元素具有相同的“翻转”标签，并且setInterval元素在第一次单击后翻转所有元素。我如何才能实现翻转效果，只在流中单击过的元素，这样并不是所有的元素都在延迟后翻转。代码是：

$(document).ready(function() {

    $('.click').toggle(function() //on click functions => toggle elements
    {           

        setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $('.flip').trigger('click');
        }, 1500) 

        $this = $(this);
        $this.addClass('flip');
        $this.children('.front').delay(600).hide(0);
        $this.children('.back').delay(600).show(0);

    },          
        function() 
        {

        $this = $(this);
        $this.removeClass('flip');
        $this.children('.front').delay(600).show(0);
        $this.children('.back').delay(600).hide(0);

        });  
});

我的意图是元素会在延迟后翻转回来，但现在所有单击的元素都会在延迟后翻转回来，即使它们只在延迟时间内可见。Hops这很有意义:)

感谢您的帮助！

Answer 1

使用、$(this)或this引用当前单击的项。也是，不需要额外的函数，只需使用toggleClass()来应用/删除类即可。

$('.click').click(function() //on click functions => toggle elements
{           

    var $this = $(this);
    setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $this.trigger('click');
    }, 1500);

    $this.toggleClass('flip');
    $this.children('.front').delay(600).hide(0);
    $this.children('.back').delay(600).show(0);

});

Answer 2

我真的不明白，但这不应该做同样的事情吗：

$('.click').on('click', function() {
    $(this).addClass('flip').children('.front, .back')
           .delay(600).toggle(0).delay(1500).toggle(0, function() {
               $(this).parent().removeClass('flip');
           });
});

FIDDLE