0

close親である通知ボックス内に子ボタンがあります。親をクリックすると、通知ボックスが展開され、通知の説明と子ボタンがその中に表示されます。

ボタンをクリックすると、通知の展開が解除され、ボタン自体と説明の両方が非表示になります。

ボタンには親クリック イベント内にクリック イベントがあるため、両方が呼び出されていました。event.stopPropagation()クリックした後、親通知の再展開を停止するようにしました。これにより、閉じるボタンのクリックで通知が展開されなくなりましたが、理解できない新しい問題が発生しました。

私のテストでは、2 つの通知が設定されており、どちらも展開されていません。通知をクリックすると、展開して説明と閉じるボタンが表示されます。閉じるボタンをクリックすると、通知が展開されず、ボタンと説明が非表示になります。しかし、他の通知の説明と閉じるボタンが表示されていることがわかりました。

コード：

    var $NotificationContainer = $("#NotificationContainer");
    $NotificationContainer.append('<div class="Notification" title="'+title+'"></div>');

    var $thisNotification = $NotificationContainer.children('.Notification[title='+title+']');
    $thisNotification.append('<div class="NotificationTitle">'+title+'</div>');
    $thisNotification.append('<div class="NotificationDescription">'+description+'</div>');
    $(".NotificationDescription").hide();

    // Button used to close an expanded notification
    $thisNotification.append("<div class='NotificationCloseButton'></div>");
    $('.NotificationCloseButton').hide();

    // When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        $thisNotification.animate({height:250}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        event.stopPropagation();
        $thisNotification.animate({height:50}, 1000);
        $thisNotification.find('.NotificationDescription').slideToggle('fast');
        $thisNotification.find('.NotificationCloseButton').slideToggle('fast');
    });

$thisNotification.find('element')正しい通知をキャッチしない方法がわかりません。

4

1 に答える 1

1

イベント処理を次のように変更すると機能しますか

// When the parent notification box is clicked
    $thisNotification.click(function(event)
    {
        var self = $(this);
        self.animate({height:250}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

    // When the child close button is clicked
    $(".NotificationCloseButton").click(function(event)
    {
        var self = $(this);
        event.stopPropagation();
        self.animate({height:50}, 1000);
        self.find('.NotificationDescription').slideToggle('fast');
        self.find('.NotificationCloseButton').slideToggle('fast');
    });

要素を作成したときに定義された変数に依存するのではなく、要素thisを識別するために使用されます (すべての要素が変数に割り当てられた最後の値を参照するループ内のケースを回避します.. )clicked

さらに、に追加している#NotificationContainerため、同一のタイトルを検索する代わりに、最後のアイテムを選択することができます..

var $thisNotification = $NotificationContainer.children().last();

最後の要素を追加したばかりなので、セレクターを完全に削除しました..

于 2011-12-16T17:37:59.623 に答える