Plusieurs boîtes de dialogue Jquery sur une page utilisant les mêmes classes

Question

J'ai plusieurs emplacements sur ma page où je souhaite ouvrir une boîte de dialogue jquery lorsqu'un clic est effectué sur un lien. J'utilise des sélecteurs de classe donc en théorie je devrais être capable d'ouvrir chacun d'eux. Mon problème est qu'avec le code que j'ai il ouvrira seulement le premier dialogue que je clique. Pourquoi est-ce???

});

Le 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

Dans votre gestionnaire .click() vous devez référencer celui que vous voulez relativement, comme ceci:

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

Au lieu d'ouvrir tous les .dialogbox éléments, nous n'appeler .dialog('open') sur le très prochain frère <div class="dialogbox"> en utilisant .next(). S'il peut y avoir des éléments entre l'ancrage cliqué et le .dialogbox alors cela changerait un peu, par exemple .nextAll('.dialogbox:first').