Question

我有这个通知系统，可以使用以下jQuery / javascript，并在调用时显示通知。

我正在做的事情和我想要做的是创建一个新通知以隐藏和删除/销毁任何现有通知。

我尝试过这样的事情：$('.notification').not(this).hide().remove();，但这不起作用。

这是通知背后的jQuery：

;(function($) {
$.notificationOptions = {
    className: '',
    click: function() {},
    content: '',
    duration: 5000,
    fadeIn: 400,
    fadeOut: 600,
    limit: false,
    queue: false,
    slideUp: 200,
    horizontal: 'right',
    vertical: 'top',
    afterShow: function(){},
    afterClose: function(){}
};

var Notification = function(board, options) {
    var that = this;
    // build notification template
    var htmlElement = $([
        '<div class="notification ' + options.className + '" style="display:none">',
            '<div class="close"></div>',
            options.content,
        '</div>'
    ].join(''));
    // getter for template
    this.getHtmlElement = function() {
        return htmlElement;
    };
    // custom hide
    this.hide = function() {
        htmlElement.addClass('hiding');
        htmlElement.animate({ opacity: .01 }, options.fadeOut, function() {
            var queued = queue.shift();
            if (queued) {
                $.createNotification(queued);
            }
        });
        htmlElement.slideUp(options.slideUp, function() {
            $(this).remove();
    options.afterClose();
        });
    };
    // show in board
    this.show = function() {
        // append to board and show
        htmlElement[options.vertical == 'top' ? 'appendTo' : 'prependTo'](board);
        htmlElement.fadeIn(options.fadeIn, options.afterShow());
        //$('.notification').css('marginLeft', -$('.notification').outerWidth()/2);
        $('.notification-board.center').css('marginLeft', -($('.notification-board.center').width()/2));
        $(window).on('resize', function(){
            $('.notification-board.center').css('marginLeft', -($('.notification-board.center').width()/2));
        });
    };
    // set custom click callback
    htmlElement.on('click', function() {
        options.click.apply(that);
    });
    // helper classes to avoid hide when hover
    htmlElement.on('mouseenter', function() {
        htmlElement.addClass('hover');
        if (htmlElement.hasClass('hiding')) {
            // recover
            htmlElement.stop(true);
            // reset slideUp, could not find a better way to achieve this
            htmlElement.attr('style', 'opacity: ' + htmlElement.css('opacity'));
            htmlElement.animate({ opacity: 1 }, options.fadeIn);
            htmlElement.removeClass('hiding');
            htmlElement.addClass('pending');
        }
    });
    htmlElement.on('mouseleave', function() {
        if (htmlElement.hasClass('pending')) {
            // hide was pending
            that.hide();
        }
        htmlElement.removeClass('hover');
    });
    // close button bind
    htmlElement.children('.close').on('click', function() {
        that.hide();
    });
    if (options.duration) {
        // hide timer
        setTimeout(function() {
            if (htmlElement.hasClass('hover')) {
                // hovering, do not hide now
                htmlElement.addClass('pending');
            } else {
                that.hide();
            }
        }, options.duration);
    }
    return this;
};

var queue = [];

$.createNotification = function(options) {
    options = $.extend({}, $.notificationOptions, options || {});
    // get notification container (aka board)
    var board = $('.notification-board.' + options.horizontal + '.' + options.vertical);
    if (!board.length) {
        board = $('<div class="notification-board ' + options.horizontal + ' ' + options.vertical + '" />');
        board.appendTo('body');
    }
    if (options.limit && board.children('.notification:not(.hiding)').length >= options.limit) {
        // limit reached
        if (options.queue) {
            queue.push(options);
        }
        return;
    }
    // create new notification and show
    var notification = new Notification(board, options)
    notification.show(board);
    return notification;
};

})(jQuery);

以下是调用/创建通知的方式：

$.createNotification({
  horizontal:'center',
  vertical:'top',
  content:'No more cards at this time.',
  duration:6000,
  click:function(){
    this.hide();
  }
});

Answer 1

代码：

$('.notification').not(this).hide().remove();

将正常工作以删除当前在DOM中的所有.notification DOM元素，除了当前的一个IF this是当前通知DOM元素。如果该代码不起作用，则可能是因为this不是您想要保留的所需通知DOM元素。如果this是Notification类的实例，那么这是错误的对象类型。要使上述代码起作用，this必须是通知DOM对象。

如果您想在插入新的DOM元素之前删除所有旧的通知DOM元素，那么您可以在新的DOM元素进入DOM之前执行此操作：

$('.notification').remove();

在插入新的之前，这将清除旧的。

由于您在当前发布的代码中没有这行代码，我无法分辨您尝试使用它的位置，因此无法进一步建议可能出现的问题。请在代码中进一步说明您尝试使用此代码的位置。

隐藏除当前正在写入/显示的元素之外的所有元素实例

1 个答案: