0

这是我的代码：

function showNotification(title, message) {
    var newNotification = $('<div></div>');
    var newNotificationHeader = $('<div>' + title + '</div>');
    var newNotificationCloser = $('<div></div>');
    newNotificationCloser.click(function(){
        closeNotification($(this).closest('notification'));
    });
    var newNotificationMessage = $('<div>' + message + '</div>');

    newNotification.attr('class', 'notification');
    newNotification.css('opacity', 0);
    newNotificationHeader.attr('class', 'notificationHeader');
    newNotificationCloser.attr('class', 'notificationCloser');


    newNotificationMessage.attr('class', 'notificationMessage');

    newNotificationHeader.append(newNotificationCloser);
    newNotification.append(newNotificationHeader);
    newNotification.append(newNotificationMessage);

    $('body').append(newNotification);
    newNotification.animate({left: '10px', opacity:1}, 400).delay(15000).animate({top: '61px', opacity:0}, 500);

}

function closeNotification(notificationWindow) {
    notificationWindow.animate({top: '61px', opacity:0}, 500);
}

基本上我正在尝试嵌套几个 div，然后将它们附加到正文中。

我的 closeNotification() 函数期望主 div 具有“通知”类。我不能使用 ID，因为在任何给定时间页面上可能有多个通知。

<body>
    <div class="notification">
        <div class="notificationHeader">
            <div class="notificationCloser">
            </div>
        </div>
        <div class="notificationMessage">
        </div>
    </div>
</body>

我曾尝试在notificationCloser的点击代码中使用以下两种方法：

closeNotification($(this).parent().parent());

和

closeNotification($(this).parents().eq(1));

奇怪的是，这些似乎不起作用，但以下将隐藏身体：

closeNotification($(this).parent().parent().parent());

和

closeNotification($(this).parents().eq(2));

对此的任何帮助将不胜感激。

4

1 回答 1

1

快速回答：使用.closest('.notification')而不是.parent().

但我想建议你一种不同的方法。使用模板将使这更容易推理和清理您的代码。

制作它们的一种简单方法是将它们包装在脚本标签中（类型未知，因此被忽略）

<body>
    <script type="text/template" id="notification-template">
        <div class="notification">
            <div class="header">
                <div class="close"></div>
            </div>
            <div class="message"></div>
        </div>
    </script>
</body>

（适用于所有浏览器，但如果您对它不满意，您可以将div.notification元素扔到页面中display:none并克隆它）

然后我们为通知对象创建一个构造函数：

function Notification(title, message){
    // create new DOM element based on the template
    var el = this.el = $(Notification.template);
    el.find('.header').text(title);
    el.find('.message').text(message);
    // close event handler, make sure `this` inside
    // the 'hide' function points to this Notification object
    el.find('.close').click($.proxy(this.hide, this));
}

// save the template code here once
Notification.template = $('#notification-template').text();

// methods
Notification.prototype = {
    show: function(){
        this.el.appendTo(document.body);
    },
    hide: function(){
        this.el.remove();
    }
};

可以这样使用：

var bacon_warning = new Notification("Out of bacon", "You've ran out of bacon");
bacon_warning.show();
于 2012-06-30T06:58:25.643 回答