使用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