Question

我有两个单独的<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

您在var之前忘记了$cardOverlay，因此$cardOverlay在全局范围内定义，并且每次处理程序运行时都是相同的变量。每次点击#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>");

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

jQuery setTimeout $ this.remove（）重叠多个元素

1 个答案: