これらのジェネリッククラスは、異なるdiv間でどのように区別できますか？

Question

私は、ゲームが電話でどのように動作するかのように動作する通知システムを作成しています。

通知はすべて最初に作成され、隠され、後でゲームはゲーム内のトリガーから特定のものを「アクティブにする」と考えられます。

通知をクラスごとに分けて保存しようとすると、問題が発生しています。各通知は、タイトルのみが表示された小さな四角いボックスとして開始されます。クリックすると、通知が展開され、説明が表示されます。

今、通知をクリックするとその通知が展開され、通知が表示されますが、その他の通知にもその説明が表示されます。

例コード：

var NotificationItems = new Array(); 

scope.registerNotification = function(title, description) 
{ 

    //add it to the array 
    NotificationItems.push(new scope.Application(title, description)); 

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

    $thisNotification.click(function() 
    { 
     $(this).toggleClass('expanded'); 
     $('.NotificationDescription').slideToggle('slow'); 
    }); 
} 

にはどうすれば.NotificationDescriptionが一意に各通知のために認識されるように得ることができますか？

Answer 1

あなたが.children()方法試みることができる：jQuery docs for children method

$thisNotification.click(function() 
{ 
    $(this).toggleClass('expanded').children('.NotificationDescription').slideToggle('slow'); 
}); 

を

Answer 2

だけクリックされた要素のための正しいものを見つける：

$thisNotification.click(function() 
{ 
    $(this).toggleClass('expanded'); 
    $(this).find('.NotificationDescription').slideToggle('slow'); 
}); 

あなたが好きな場合は、呼び出しをチェーンすることができます

$thisNotification.click(function() 
{ 
    $(this).toggleClass('expanded').find('.NotificationDescription').slideToggle('slow'); 
}); 

Answer 3

イベントの委任を試してみるとよいでしょう。

$('#NotificationContainer > div.Notification').live('click',function() 
{ 
$(this).toggleClass('expanded').find('div.NotificationDescription').slideToggle('slow'); 
}); 

この方法では、イベントを1回だけ（initで）アタッチする必要があり、1つのイベントですべての通知が処理されます。あなたはまた、一度にすべてのあなたのhtmlを追加する必要があります

：

予告微妙な違い、我々はjqueryの中の要素ではなく、DOMを構築し、一度にすべてを追加しています。