Несколько диалогов Jquery на странице с использованием одних и тех же классов

Question

У меня есть несколько мест на моей странице, где я хочу открывать диалоговые окна jquery при нажатии на ссылку. Я использую селекторы классов, поэтому в теории я должен иметь возможность открыть каждый из них. Моя проблема в том, что с кодом, который у меня есть, он откроет только первый диалог, который я нажимаю. Почему это???

    //modal help div
    $('.dialogbox').dialog({
                   modal:true,
                   autoOpen: false
                   });
    $(".modalhelp").click(function() {
$('.dialogbox').dialog('open')

});

HTML:

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">Hello</div>

<a class="modalhelp" href="javascript:void[0]"><img src="images/information.png" /></a>
<div class="dialogbox" style="display:none" title="Information">NO HELLO</div>

Answer 1

В вашем обработчике .click() вам нужно сослаться на тот, который вы хотите относительно, например:

$(".modalhelp").click(function() {
  $(this).next('.dialogbox').dialog('open');
});

Вместо того, чтобы открывать все элементы .dialogbox, мы тольковызов .dialog('open') на ближайшем родном брате <div class="dialogbox"> с использованием .next().Если могут быть элементы между привязанным якорем и .dialogbox, тогда это немного изменится, например .nextAll('.dialogbox:first').