如何動態點擊圖片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>