jquery只隐藏最后通知

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();