jqueryui 打开多个对话框；应该只打开一个

Question

我有一个包含评论的提要，并希望允许用户删除评论。下面的代码允许用户单击图像，然后会出现一个对话框，提醒用户删除。

现在，这适用于页面上的每条评论，因此单击删除按钮一次会打开多个对话框(有多少评论，就有多少个对话框)。

如何更改下面的代码，以便在单击选择器时仅显示该注释的对话框？

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

Answer 1

首先，你不应该有多个 #delete_comment_dialog页面上的元素，因此我们将其更改为 .delete_comment_dialog 。然后你可以在注释中整体添加一个类，使用 closest 转到顶级评论包装器，以及 find 返回对话框。 HTML 看起来像这样:

<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 是这样的:

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

演示:http://jsfiddle.net/ambiguous/VePZp/

或者，使用带有 id 的单个对话框属性，添加id回复您的评论 <div> s，并传递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/ ​