0

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

$(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);

        });  
});

我的意图是元素会在延迟后翻转回来，但现在所有点击的元素都会在延迟后翻转回来，即使它们只在一段时间内可见 - 延迟。啤酒花这是有道理的:)

感谢您的帮助！

4

2 回答 2

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

});
于 2012-05-31T12:33:23.707 回答
0

我真的不明白，但不应该这样做：

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

小提琴

于 2012-05-31T12:28:55.870 回答