0

我使用 javascript/jquery 为我的仪表板制作了一个通知系统，但是当我同时插入 3 个通知时，它只会隐藏最后插入的通知。

function NewNotice(title, message, bool){
                if(bool){
                    var color = "green";
                    var icon = "checkmark";
                } else {
                    var color = "red";
                    var icon = "cancel-2";
                }
                $('.notices').append('<div class="bg-color-'+ color +'">');
                $n = $('.notices').children().last();
                $n.append('<a href="#" class="close">');
                $n.append('<div class="notice-icon"> <i class="icon-'+ icon +' fg-color-white" style="font-size:32px;"></i> </div>');
                $n.append('<div class="notice-image"> <i class="icon-'+ title +' fg-color-white" style="font-size:48px;"></i> </div>');
                $n.append('<div class="notice-header fg-color-white">'+ title +'</div>');
                $n.append('<div class="notice-text">Message: "'+ message +'" was posted.</div>');

                $n.animate({right:'+=380'}, 500);
                var t = setTimeout(function(){
                   $n.animate({
                       right:'-=380'
                   }, 500, function(){
                       $n.hide();
                   });
                },5000);
            }

我猜它只会隐藏最后一个，因为我正在缓存选择器，但我不知道如何解决这个问题。

4

1 回答 1

2

问题是您使用该$n变量而不将其声明为函数，因此它是在全局范围内自动创建的，这意味着在您的setTimeout函数中 $n 指的是由最新设置的全局变量运行的时间NewNotice。

要修复它，只需var在创建变量时添加。

var $n2 = $(this);
var $n = $('.notices').children().last();
于 2013-05-08T09:16:55.257 回答