javascript - 删除序列中jquery创建的元素

Question

我正在尝试使用 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 函数，但是当我创建了将参数作为当前元素传递的函数时，我无法获取。

这是pen .

任何帮助将不胜感激。

谢谢!

Answer 1

您遇到了几个问题:

1. setTimeout 函数必须在显示时调用(而不是在构建时调用)，否则甚至可以在显示通知之前调用它(因此您的通知不会自动删除)。
2. 当您调用 setTimeout 来销毁通知时 - 您需要传递刚刚创建的通知的容器，以便销毁函数能够找到要删除的相关元素(当您使用 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