页面上使用相同类的多个 Jquery 对话框

发布于 2024-09-11 02:46:25 字数 790 浏览 3 评论 0原文

我的页面上有多个位置，我想在单击链接时打开 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>

原文

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')

});

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮倦 2024-09-18 02:46:25

在您的 .click() 处理程序中，您需要引用您需要的处理程序相对地，像这样：

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

我们只在下一个上调用.dialog('open')，而不是打开所有.dialogbox元素> 使用 兄弟

。接下来（）。如果单击的锚点和 .dialogbox 之间可能存在元素，那么这会发生一些变化，例如 .nextAll('.dialogbox:first')。

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

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

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').