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 のクリック コードで次の 2 つのメソッドを使用しようとしました。

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()ます。

しかし、私はあなたに別のアプローチを提案したいと思います。テンプレートを使用すると、コードの推論とクリーンアップがはるかに簡単になります。

それらを作成する簡単な方法の 1 つは、それらを script タグでラップすることです (タイプが不明なため、無視されます)。

<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 に答える