jQuery#对话框由多个类调用

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

所以我想用jQuery#对话框来实现这一点，但我的问题是，当我点击任何按钮时，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>

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

相关内容

最新更新

热门标签：