页面上使用相同类的多个Jquery对话框 [英] Multiple Jquery dialogs on page using same classes

问题描述

我在页面上有多个地方，当我点击链接时，我想打开一个jquery对话框。我正在使用类选择器，所以理论上我应该能够打开它们。我的问题是，使用代码我只会打开我点击的第一个对话框。为什么是这样？？？

I have multiple places on my page where I want to open a jquery dialog boxes when a link is clicked. I am using class selectors so in theory I should be able to open each of them. My problem is that with the code I have it will only open the first dialog I click. Why is this???

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

推荐答案

在 .click（） 处理程序你需要参考一个你想要的相对，像这样：$ {

In your .click() handler you need to reference the one you want relatively, like this:

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

而不是打开所有 .dialogbox 元素，我们只是在下一个 sibling < div class =对话框中调用 .dialog（'open'） > 通过使用 .next（） 。如果点击的锚点和 .dialogbox 之间可能存在元素，那么这会有所改变，例如 .nextAll（'。dialogbox：first'） 。

Instead of opening all .dialogbox elements, we're only calling .dialog('open') on the very next sibling <div class="dialogbox"> by using .next(). If there may be elements in-between the clicked anchor and the .dialogbox then then this would change a bit, for example .nextAll('.dialogbox:first').

这篇关于页面上使用相同类的多个Jquery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！