未从先前调用 jQuery 中清除的选项

Question

我制作了这个小插件来显示 Twitter 样式的警报：

        jQuery.fn.myAlert = function (options) {
            var defaults = {
                message: false,
            class: 'normal',
                timer: 500,
                delay: 3000,
            };
            var options = $.extend(defaults, options);
            if (!options.message || options.message == '') {
                return false;
            }
            $('body').append('<div id="alert_notification" class="'+options.class+'"><div id="alert_message">' + options.message + '</div></div>')
            $('#alert_notification').slideToggle(options.timer).delay(options.delay).slideToggle(options.timer);
        return;
        }

问题是：第一次效果很好，但是当我在同一页面中再次调用时，值是从上次调用中设置的。

任何想法如何使它工作？

Answer 1

我的猜测是slideToggle() 没有显示您打算显示的<div>，因为jQuery 没有附加没有唯一ID 的新<div>s。在附加新的之前，您可能应该从页面中删除最初附加的<div>s。或者，让 jQuery 替换现有的。

$('#alert_notification').remove();
$('body').append(...);

另外，class 是 JavaScript 中的保留字。我会将您的 defaults 更改为：

var defaults = {
    message: false,
    'class': 'normal',
    timer: 500,
    delay: 3000,
};

然后使用options['class'] 而不是options.class 访问它，或者为class 属性选择一个不同的名称。