如何解决多个类调用的jQuery #dialog
我想在产品列表中为我的电子商务的每个产品集成一个按钮，我想在其中显示每个产品的一些数据，例如品牌模型兼容性。
所以我想用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>
解决方法
当您在元素上使用.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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。