删除由jquery按顺序创建的元素

deleting elements created by jquery in a sequence

本文关键字：创建 元素 顺序 jquery 删除      更新时间：2023-09-26

我正在尝试使用jquery构建我的第一个插件。

到目前为止成功了，但是我一直在删除通知。

我可以删除点击事件的通知。

Notification.prototype.destroy = function(element) {
    var self = this;
    element.closest('.notification-container').remove();
};

我在init方法中调用这个函数

Notification.prototype.init = function() {
    var self = this;
    self.$el.on('click', function() {
        self.build();
    });
    self.$body.on('click', '.close', function() {
        self.destroy(this);
    })
};

现在我想给用户一个自动关闭选项，我想使用setTimeout函数，但由于我已经创建了传递参数作为当前元素的函数，我无法获得它。

给你笔。

任何帮助都将非常感激。

谢谢!

这里有几个问题:

  1. setTimeout函数必须在显示时调用(而不是在构建时)，否则它可以在显示通知之前调用(因此您的通知不会自动删除)。
  2. 当你调用setTimeout来销毁通知时-你需要传递你刚刚创建的通知的容器，所以destroy函数将能够找到要删除的相关元素(当你使用click选项-你传递X元素，所以很容易找到最近的容器，但是当你使用setTimeout时你必须传递容器元素本身)。

我认为我所做的所有改变都是在build功能，这里是:

Notification.prototype.build = function() {
    var self = this;
    var closeHTML = self.options.autoClose ? '' : '';
    if (self.options.type == 'thumb') {
        var $notificationHTML = $('<div class="notification-container">' +
                                    '<i class="close">x</i>' + 
                                    '<div class="notification">' +
                                        '<div class="thumb-container">' +
                                            '<img src="' + self.options.src + '">' +
                                        '</div>' +
                                        '<p>' + self.options.text + '</p>' +
                                    '</div>' +
                                '</div>');
    } else {
        var $notificationHTML = $('<div class="notification-container">' +
                                '<i class="close">x</i>' + 
                                '<div class="notification ' + self.options.style + '">' +
                                    '<p>' + self.options.text + '</p>' +
                                '</div>' +
                            '</div>');
    }
    self.$body.prepend($notificationHTML);
    if(self.options.autoClose) {
        setTimeout(function() {
            self.destroy($notificationHTML);
        }, 5000)
    } else {
        self.$body.on('click', '.close', function() {
            self.destroy(this);
        })
    }
};

和一个工作的合作者:http://codepen.io/anon/pen/JKgPgB?editors=0010

相关文章：