使用 JQuery 在 5 秒后隐藏元素实例答案

【问题标题】：Hide instance of element after 5 seconds using JQuery使用 JQuery 在 5 秒后隐藏元素实例
【发布时间】：2016-03-02 03:33:40
【问题描述】：

我正在尝试实现通知样式的 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);
}

但我相信你们所有人都可以看出这是有缺陷的。任何帮助或建议将不胜感激。

【问题讨论】：

我看不出你的代码有什么问题。您是否在控制台中看到任何错误？主代码中的 if 语句在哪里？
stackoverflow.com/questions/3655627/…
@ÁlvaroTouzón 我已经看过这个问题，但它会根据班级将其删除。
那改jquery css查询不行吗？
@RajaprabhuAravindasamy 我最后一个代码块的问题是，如果我快速添加多个通知，它只会删除最新的通知而不是最旧的通知。

标签： javascript jquery algorithm notifications

【解决方案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);
  }
}

【讨论】：

哇，我真的是这个答案，虽然我不确定它是如何工作的。当你说 $notification.remove(); 时 jquery 怎么知道我在说哪个 $notification
而不是附加一个匿名的 html 字符串，它被转换为 dom 元素。你正在附加一个由 jQuery 对象表示的 dom 元素。在追加期间对对象的引用不会丢失
至于知道哪个......函数调用的每个实例中只有一个作用域变量对象
谢谢，我认为这个答案更适合我的需要。
@adeneo 所做的是相同的概念……只是写法不同

【解决方案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
};

【讨论】：

让我试试这个，但这不会遇到从#notification-container 中删除可能是之后添加的通知的最后一个元素的问题吗？
范围界定将帮助您摆脱困境！您传递给删除通知的最后一个孩子是一个 jquery 元素，而不是每个说的“最后一个孩子”。
有效！做得太好了。让我尽快选择作为答案。

【解决方案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

【讨论】：

我以前从未见过您创建 div 的方式。你知道我可以阅读的好资源吗？或者只是它的名字？
@WiseOlMan - 当然，它在 jQuery documentation 中，是创建元素的首选方式。