jqueryui открытие нескольких диалогов; должен открыть только один - PullRequest
Новая
       9

jqueryui открытие нескольких диалогов; должен открыть только один

1 голос
/ 15 февраля 2012

У меня есть фид с комментариями, и я хочу разрешить пользователям удалять комментарии.Приведенный ниже код позволяет пользователям нажимать на изображение, и появляется диалоговое окно, которое предупреждает пользователей об удалении.

В настоящее время это относится ко всем комментариям на странице, поэтому при нажатии кнопки удаления один раз открывается несколькодиалоги (столько диалогов, сколько есть комментариев).

Как изменить код ниже, чтобы при нажатии на селектор отображалось только диалоговое окно для этого комментария? 

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

Ответы [ 2 ]

3 голосов
/ 15 февраля 2012

Прежде всего, вы не должны иметь несколько элементов #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 s к своему комментарию <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/​

1 голос
/ 15 февраля 2012

Вы также можете назначить каждому изображению и диалогу определенный идентификатор, чтобы лучше ориентироваться на каждое. Поскольку вы уже просматриваете свои комментарии, вы можете просто добавить индекс цикла, в противном случае вы можете использовать случайное число: 

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

В идеале вы хотели бы использовать что-то кроме идентификатора для хранения индекса, поскольку идентификаторы не должны содержать только цифры.

Вы также можете использовать функцию $ .each с возвращаемым значением false. Если вы включите return false в цикл $ .each, он должен остановиться после 1 итерации и открыть только 1 диалоговое окно.

...