嘿! 我正在 div 中从数据库调用图像。通过单击任何图像,我将显示包含产品详细信息的相同模式。
为了显示模态,在 JavaScript 中,我通过 src 接收图像,单击该图像,因此打开相同的模态。 现在我想获取在 php 脚本中使用该 id 所单击的每个图像的 id。 我怎样才能做到这一点?
php
<div data-toggle='modal' data-target='#myModal'>
<h3 align='center'>$product_name</h3>
<center>
<img src='admin_area/product_images/u_buyer_product_img/$product_image1' class='getSrc' />
<br></center>
</div>
JavaScript
<script>
$(document).ready(function(){
$('.getSrc').click(function() {
var src =$(this).attr('src');
$('.showPic').attr('src') = src;
});
});
</script>
html
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<img src="" class="showPic">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 align="left">Product Name
</h3>
<p>Product Discription</p>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div>
<label> Product-Code :- </label>
</div>
<div>
<label> Quantity :- </label>
</div>
<div>
<label> Price :- </label>
</div>
<div>
<label> Action :- </label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
最佳答案
假设在 PHP 脚本中您有一个包含所显示图像 ID 的 $id
变量:
<div data-toggle='modal' data-target='#myModal'>
<h3 align='center'>$product_name</h3>
<center>
<img src='admin_area/product_images/u_buyer_product_img/$product_image1' class='getSrc' data-image-id='$id' />
<br>
</center>
</div>
然后在JS中你可以检索id:
<script>
$(document).ready(function(){
$('.getSrc').click(function() {
var src =$(this).attr('src');
var id = $(this).data('image-id');
$('.showPic').attr('src') = src;
});
});
</script>
关于javascript - 如何在点击时动态选择图像的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37482072/