如何动态点击图片ID

Question

Hy！ 我从数据库中调用图像的div。通过点击任何图像，我显示具有产品详细信息的相同模态。

为了显示模态，在JavaScript中，我通过src接收图像，这被点击并因此打开相同的模态。 现在我想要获取每个图像的id在php脚本中使用该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">&times;</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> 

Answer 1

鉴于在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>