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

时间:2016-05-27 11:14:36

标签: javascript php jquery ajax

HY! 我在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>

1 个答案:

答案 0 :(得分: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>