javascript - 如何在点击时动态选择图像的ID

Question

嘿!我正在 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">&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>