jQuery #dialog 被多个类调用答案

【问题标题】：jQuery #dialog called by multiple ClassjQuery #dialog 被多个类调用
【发布时间】：2020-12-15 00:14:48
【问题描述】：

我想在产品列表中为我的电子商务的每个产品集成一个按钮，我想在其中显示每个产品的一些数据，例如品牌模型兼容性。

所以我想用 jQuery #dialog 来实现这一点，但我的问题是，当我点击任何按钮时，jQuery 会打开每个按钮的所有对话框。

我该如何解决这个问题？

PHP：

$var1 = "ciao";

$var2 = "bau";

$var3 = "miao";

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $( function() {
        $( ".wrapper" ).dialog({
          autoOpen: false,
          title: 'Title Dialog',
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });
     
        $( ".opener" ).on( "click", function() {
            $( ".wrapper" ).dialog( "open" );
          
        });
      } );
    </script>
</head>
<body>
    <button class="opener">Button1</button>
    <div class="wrapper">
    <?= $var1 ?>
    </div>
    <br>
    <button class="opener">Button2</button>
    <div class="wrapper">
    <?= $var2 ?>
    </div>
    <br>
    <button class="opener">Button3</button>
    <div class="wrapper">
    <?= $var3 ?>
    </div>
</body>

【问题讨论】：

标签： html jquery class button dialog

【解决方案1】：

当你在元素上使用.dialog()时，它们会被移动，所以我们不能使用.next()，但你可以使用下面的解决方案。

var i = $(this).index(".opener");
$('.wrapper').eq(i).dialog("open");

演示

$(function() {
  $(".wrapper").dialog({
    autoOpen: false,
    title: 'Title Dialog',
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $(".opener").on("click", function() {
    var i = $(this).index(".opener");
    $('.wrapper').eq(i).dialog("open");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
  <button class="opener">Button1</button>
  <div class="wrapper">
    <?= $var1 ?>
  </div>
  <br>
  <button class="opener">Button2</button>
  <div class="wrapper">
    <?= $var2 ?>
  </div>
  <br>
  <button class="opener">Button3</button>
  <div class="wrapper">
    <?= $var3 ?>
  </div>
</body>

【讨论】：

是的，我知道我之前尝试过的 .next()，现在我又试了一次，但是使用 .next() 任何按钮都不起作用。
@SalvoUPrincipale 我的错，我有点太快了。现在看演示。