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

【问题标题】：jqueryui opening multiple dialogs; should only open onejqueryui 打开多个对话框；应该只打开一个
【发布时间】：2012-02-15 03:06:38
【问题描述】：

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

现在，这适用于页面上的每条评论，因此单击删除按钮一次会打开多个对话框（与 cmets 一样多的对话框）。

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

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

【问题讨论】：

您为什么不只有一个对话框或即时创建对话框？它可以改善页面的加载时间，因为您不必在每个对话框上创建对话框。如果这不是一个合适的选项，请向我们展示您的 html，以便我们更轻松地为您提供帮助。

标签： jquery jquery-ui dialog

【解决方案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 属性的单个对话框，将ids 添加到您的评论<div>s，并通过data 属性或类似属性传递要删除的评论的id。例如：

<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/

【讨论】：

感谢您如此详尽的回答；这有我需要的一切！

【解决方案2】：

您还可以为每个图像和对话框指定一个特定的 ID，以便您可以更好地定位每个图像。由于您已经在循环您的 cmets，您只需附加循环的索引，否则您可以使用随机数：

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

你的 jquery 将是

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

理想情况下，您可能希望使用 ID 以外的其他内容作为索引存储，因为 ID 不应仅包含数字。

您还可以使用 $.each 函数并返回 false。如果在 $.each 循环中包含 return false，它应该在 1 次迭代后停止并且只打开 1 个对话框。

【讨论】：