jqueryui複数のダイアログを開く。

Question

私はコメント付きのフィードを持っており、ユーザーがコメントを削除できるようにしたいと考えています。以下のコードでは、ユーザーがイメージをクリックすることができ、削除をユーザーに警告するダイアログボックスが表示されます。

これはページ上のすべてのコメントに適用されるため、一度削除ボタンをクリックすると複数のダイアログが開きます（コメントと同じ数のダイアログが表示されます）。

セレクタをクリックしたときにそのコメントのダイアログボックスのみが表示されるように、以下のコードを変更するにはどうすればよいですか？

Answer 1

まず、#delete_comment_dialog個の要素をページに含めることはできません。そのため、.delete_comment_dialogに変更します。次に、コメント全体にクラスを追加し、closestを使用してトップレベルのコメントラッパーに、findを使用してダイアログに戻ります。あるいは、http://jsfiddle.net/ambiguous/VePZp/

、id属性を持つ単一のダイアログを使用するid秒を追加します。

$('span.delete_comment_button').click(function() { 
    $(this).closest('.comment') 
      .find('.delete_comment_dialog') 
      .dialog('open'); 
    return false; 
});​ 

デモ：このような

<div class="comment"> 
    blah blah blah blah 
    <span class="delete_comment_button">delete</span> 
    <div class="delete_comment_dialog">first dialog</div> 
</div> 
<div class="comment"> 
    blah blah blah blah 
    <span class="delete_comment_button">delete</span> 
    <div class="delete_comment_dialog">second dialog</div> 
</div>​ 

そして、あなたのjQuery：HTMLは次のようになりますあなたのコメントは<div>秒であり、コメントのidをdata属性などで削除します。たとえば、次のように

<div id="cmt1" class="comment"> 
    blah blah blah blah 
    <span class="delete_comment_button">delete</span> 
</div> 
<div id="cmt2" class="comment"> 
    blah blah blah blah 
    <span class="delete_comment_button">delete</span> 
</div> 
<div id="delete_comment_dialog">the only dialog</div> 

そして：

$('#delete_comment_dialog').dialog({ 
    autoOpen: false, 
    close: function() { 
     // 'close' handler just for demonstration purposes. 
     alert($('#delete_comment_dialog').data('kill-this')); 
    } 
}); 
$('span.delete_comment_button').click(function() { 
    var $cmt = $(this).closest('.comment'); 
    $('#delete_comment_dialog').data('kill-this', $cmt[0].id); 
    $('#delete_comment_dialog').dialog('open'); 
    return false; 
});​ 

デモ：http://jsfiddle.net/ambiguous/M4QM6/

Answer 2

また、それぞれのイメージとダイアログにそれぞれのIDを指定して、それぞれのIDをより適切にターゲティングすることもできます。あなたのjqueryのは、その後

$('span.delete_comment_button img').click(function() { 
     $('#delete_comment_dialog' + THIS.ID).dialog('open'); 
     return false; 
}); 

理想的にあなたがしたいと思うだろう

<span class="delete_comment_button"><img id="1" /></span> 
<div id="delete_comment_dialog1"></div> 

：あなたはあなたのコメントをループしているので、すでにあなただけそうしないと、乱数を使用することができ、ループのインデックスを追加することができますIDには数字だけを含めるべきではないので、インデックスストレージにはID以外のものを使用してください。

また、$ .each関数をfalseを返して使用することもできます。 $ .eachループにfalseを指定すると、1回の繰り返しの後に停止し、1つのダイアログのみを開く必要があります。