Javascript模式根据动态id在弹出窗口中传递动态变量

Question

<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>
<script>
$('#wishlist-modal').on('shown.bs.modal', function() {
var $el = $("#wishlisticon");
var $username = $el.data('productid');
alert($username);
});
</script>

页面上有几个按钮指向同一个模态，但每个模态需要传递不同的数据。要传递的数据保存在data-productid.中当弹出模式打开时，我想使用数据生产变量。

该功能正在工作，但每次警报都给出相同的生产值(即=1(该功能无法理解它应该拾取产生的相应数据

Answer 1

如文档中所述，您可以使用event.relatedTarget根据单击的按钮来更改模态的内容。

$('#wishlist-modal').on('shown.bs.modal', function(event) {
var $el = $(event.relatedTarget);
var $username = $el.data('productid');
alert($username);
});

演示：

$('#exampleModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
alert(recipient)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<h2>Hello World!</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>