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

你有几个问题：

必须在显示时调用setTimeout函数（而不是在构建时调用），否则甚至可以在显示通知之前调用它（因此不会自动删除通知）。
当您调用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

删除序列中由jquery创建的元素

1 个答案: