Question

我使用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);
            }

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

Answer 1

问题是你在使用$n变量而没有声明它是函数，因此它在全局范围内自动创建，这意味着在setTimeout函数中$ n是引用将在NewNotice运行的最近时间设置的全局变量。

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

var $n2 = $(this);
var $n = $('.notices').children().last();

Jquery只隐藏了最后的通知

1 个答案: