jQuery setTimeout $this.remove() 多个元素重叠

Question

我有 2 个单独的 <div> 元素，它们具有类似的 invoke 按钮，可以添加透明覆盖消息。我的问题是，当我快速连续单击两个按钮时，或者在超时到期前两次单击同一个按钮时，叠加层只会被删除一次（而不是叠加添加许多叠加层）。如果有人能帮助我解决这个问题，我将不胜感激（这似乎非常低效）。

JSFiddle: http://jsfiddle.net/Hybridx24/733ueao4/

$(document).on('click', '#invoke', function(e) {

    $this = $(this);

    $cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

    $this.parent('.card-shadow').append($cardOverlay);

    $cardOverlay.height('100%').css({
        'opacity' : 1,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background': 'rgba(0, 0, 0, 0.6)',
        'width': '100%',
        'z-index': 1,
        'border-radius': '6px',
        'text-align': 'center'
    });

    setTimeout(function() {
        $cardOverlay.fadeOut("normal", function(){
            $(this).remove();
        })
    }, 2000)
});

Answer 1

您在 $cardOverlay 之前忘记了 var，因此 $cardOverlay 是在全局范围内定义的，并且是 相同的 变量处理程序运行s。每次单击 #invoke 时都会覆盖它的值，这意味着当 setTimeout 运行时，它总是指对 $cardOverlay 的最新分配，因此对旧的覆盖层丢失了。变化：

$cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

至

var $cardOverlay = $("<div style='transition: background 0.2s linear' class='card-overlay'><span style='color:white;position:relative;top:40%;font-weight:bold'>Success!</span></div>");

出于类似的原因，您可能还想在 $this = $(this); 之前添加 var。请记住，虽然您可以在 javascript 中省略 var，但每次您这样做时，变量都是在全局范围内定义的，并且可以出现其他方法（或者相同的方法可以运行第二次）并干扰变量的值。一般来说，如果您使用的是您只想在特定范围内访问的变量，则应在该范围内使用 var 定义它，在您的情况下是您的处理函数。

jQuery setTimeout $this.remove() 多个元素重叠

jQuery setTimeout $this.remove() Overlapping for Multiple Elements

javascript

jquery

html

css

fade