使用JQuery 5秒后隐藏元素的实例

Question

我试图实现通知样式JQuery函数。这里是我到目前为止

function notify(message, type, autohide, delay) { 
    message = message; 
    type = type || ""; 
    autohide = autohide || false; 
    delay = delay || 0; 
    $('#notification-container').append("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
}; 

调用此函数正确添加了通知，但我一直没能做出后的时间“延迟”时期，特定元素被删除，不删除其他通知。我搜索过，但只找到#id的解决方案或基于类。我不想在每个新通知中都加上id，如果我通过.notice删除它，所有通知都将同时过期。我已经得到最近的一直使用

if (autohide) { 
    setTimeout(function() { 
    $('#notification-container .notice:last-child').remove(); 
    }, delay); 
} 

但我敢肯定，你们都可以看到这是如何有缺陷。任何帮助或建议，将不胜感激。

Answer 1

可以使元素的jQuery对象，并使用该引用删除它

function notify(message, type, autohide, delay) { 
    message = message; 
    type = type || ""; 
    autohide = autohide || false; 
    delay = delay || 0; 
    var $notification = $("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
    $('#notification-container').append($notification); 


    if (autohide) { 
    setTimeout(function() { 
     $notification.remove();  
    }, delay); 
    } 
} 

Answer 2

你可以尝试这样的事：

var deleteNotice = function(elem,delay){ 
    var tout = setTimeout(function(){ 
     clearTimeout(tout); 
     elem.remove() 
    },delay);//Now this acts on only this element 
} 

function notify(message, type) { 
    $('#notification-container').append("<div class='notice " + type + "'>" + message + "<div class='close-container'><span class='glyphicon glyphicon-remove'></span></div></div>"); 
    //Now assign this element to a variable, so everytime your function is called el represents the latest notice 
    var el = $('#notification-container .notice:last-child'); 
    deleteNotice(el,10000);//A function to delete this selected element 
}; 

Answer 3

我会创造的元素，并将它们存储在本地变量，这种方式只适用于函数调用的元素将被删除。像

function notify(message, type, autohide, delay) { 
    var div = $('<div />', { 
     'class' : 'notice' + (type ? ' '+type : ''), 
     text : message || '' 
    }), 
     close = $('<div />', { 
      'class' : 'close-container', 
      on  : { 
       click : function() { 
        div.remove(); 
       } 
      }, 
      html : $('<span />', { 
       'class' : 'glyphicon glyphicon-remove' 
      }) 
    }); 

    if (autohide) { 
     div.delay(delay||0).hide(0, function() { 
      $(this).remove(); 
     }); 
    } 

    $('#notification-container').append(div.append(close)); 
} 

东西

FIDDLE

Here's a version that supports animations