Question

有时这个函数调用太快而且创建了多个元素，但由于它使用的ID不是每个实例唯一的，因此淡出和删除div的部分仅适用于顶级元素，而不是全部。所以我最终得到了一个不会褪色/移除的静态div标签。

我能想到的最好的事情就是再次重复这个过程。我该怎么做，还是有更好的方法？

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    jQuery('#notification').delay(1500).fadeOut(1200, function () {
        jQuery('#notification').remove();
    });
}

Answer 1

只需缓存您创建的元素，不需要ID

function (type, message) {
    var el = $("<div class='push-notification push-"+type+"'>"+message+"</div>");
    jQuery(document.body).append(el);

    el.delay(1500).fadeOut(1200, function () {
       el.remove();
    });
}

Answer 2

如何为他们提供唯一ID？

var notificationCount=0;
document.triggerNotification = function (type, message) {
    notificationCount++;
    var notificationId="notification"+notificationCount;
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='"+notificationId+"'>"+message+"</div>");

    jQuery('#'+notificationId).delay(1500).fadeOut(1200, function () {
        jQuery('#'+notificationId).remove();
    });
}

Answer 3

有两种选择：

通过附加不断增加的数字（例如）来使您的ID唯一。
使用新类作为您感兴趣的行的指示符，然后使用“.notificationID”样式选择器附加fadeOut。

Answer 4

您可以在函数调用中将其创建为变量，而不是使用ID作为动画/删除通知的句柄，从而为您提供了一种删除它的方法。像这样：

document.triggerNotification = function(type, message) {
    var notification = $("<div class='push-notification push-" + type + "'>" + message + "</div>");
    jQuery(document.body).append(notification);

    setTimeout(function() {
        notification.fadeOut(1200, function() {
            notification.remove();
        })
    }, 1500);
};

此外，我认为在这种情况下setTimeout比.delay()更合适。虽然它们都可以工作，但.delay()旨在用于排队多个动画。在这种情况下，setTimeout足够了，因为你只调用一个动画。请参阅此处的文档：http://api.jquery.com/delay/

最后，这是我提供的代码的工作演示：http://jsfiddle.net/WqwsN/

您可以通过点击按钮看到您可以获得任意数量的通知，并且它们会按照添加的顺序淡出。

重复JS功能的最佳方法

4 个答案: