Question

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

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

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

$('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/

Answer 2

您还可以为每个图像和对话框提供一个特定的ID，以便您可以更好地定位每个图像。既然你已经在循环注释，你可以只追加循环的索引，否则你可以使用一个随机数：

<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不应仅包含数字。

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

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

2 个答案: