多个类调用的jQuery #dialog

问题描述

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

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

我该如何解决？

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

解决方法

当您在元素上使用.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>