Question

这是我的代码：

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));

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

Answer 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();

JQuery parents（）。eq（2）和.parent（）。parent（）表现不好？

1 个答案: