Question

我正在尝试在同一页面中设置多个对话框，尝试仅打开开启者旁边的对话框 ES。

<ul>
  <li class="dialog">
     <a class="opener" href="#">1</a>
     <div class="modal" title="Title for 1">Content for 1</div>
  </li>

  <li class="dialog">
     <a class="opener" href="#">2</a>
     <div class="modal" title="Title for 2">Content for 2</div>
  </li>
</ul>

和jquery：

    $(".modal").dialog({
        autoOpen: false,
        zIndex: 3999,
        modal: true
    });


    $('.opener').click(function() {
        $(this).next().dialog('open');
    });

但$（this）.next（）。dialog（'open'）;总是给我不确定的！我在哪里失败？ :( 谢谢:)）

Answer 1

您需要保留对话框的引用，如下所示：

$(".opener").each(function() {
  $.data(this, 'dialog', $(this).next());
}).click(function() {
  $.data(this, 'dialog').dialog('open');
});
$(".modal").dialog({
  autoOpen: false,
  zIndex: 3999,
  modal: true
});

You can test it out here。这样做的原因是，当你调用.dialog()时，它会将新包装的元素移动到正文的末尾，就在</body>之前....所以它不再是下一个元素。

Answer 2

如果每个li只有一个div，那么你可以使用find（）。

 $(this).parent().find("div")

会给你点击的li里面的div

jquery dialog（） - 仅在开启器旁边捕获div

2 个答案: