单击图像时，图像列表中的相同图像以模态显示

Question

我已经制作了用于在单击图像列表中的图像时显示大图像的模式。但它在单击任何图像时同时显示相同的图像。

目前我每次点击图片都会得到相同的图片

我想查看单击图像的不同图像。

我的代码看起来像这样

while($row = mysqli_fetch_array($attachment)){

    ?>

    <tr id='ea<?php echo $row['enquiry_attachment_id'];?>'>

        <th><?php 

            $ext = pathinfo($row['file_name'], PATHINFO_EXTENSION);

            $allowed =  array('gif','png' ,'jpg','jpeg');

            if(in_array(strtolower($ext),$allowed) ) {

                echo "

                <div class='pop'>

                <image class='imageresource' id='imageresource'  src='assets/enq_attachment/".$row['file_name']."' style='width:100px;height:100px'>

                </div>

                ";

            }else{

                if($ext == "pdf"){

                    echo "<i class='fa fa-file-pdf-o'></i>";

                }else if($ext == "xls" || $ext == "xlsx" || $ext == "csv"){

                    echo "<i class='fa fa-file-excel-o'></i>";

                }else{

                    echo $row['file_name'];

                }

            }

        ?></th>

        <td><a href="assets/enq_attachment/<?php echo $row['file_name'];?>" target='_blank'>DOWNLOAD</a></td>

        <td><span class="btn btn-danger" onclick="deleteFun('enquiry_attachment',<?php echo $row['enquiry_attachment_id'];?>,'ea<?php echo $row['enquiry_attachment_id'];?>')"><i class="fa fa-times"></i> </span></td>

    </tr>

    <?php

    $number = $number + 1;

}

模态看起来像这样

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

Answer 1

就像我说我不使用 jQuery 但我认为基本上你的代码发生的事情是事件侦听器需要引用接收click事件的元素然后找到子节点〜img.imageresource顺便我忘了说，标签应该是img而不是image&nbsp;$(function() {&nbsp; &nbsp; $('.pop').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; /* or should that be $( this ) ?? */&nbsp; &nbsp; &nbsp; &nbsp; let child=this.querySelector('img.imageresource')&nbsp; &nbsp; &nbsp; &nbsp; $('.imagepreview').attr( 'src', child.src );&nbsp; &nbsp; &nbsp; &nbsp; $('#imagemodal').modal('show');&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;});

Answer 2

如果您正在寻找基于纯jquery的解决方案，那么您可以使用以下代码&nbsp; &nbsp; $('.pop').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var imgSrc = $(this).children('.imageresource').attr('src'); //get image src here&nbsp; &nbsp; &nbsp; &nbsp; $('.imagepreview').attr('src', imgSrc );&nbsp; &nbsp; &nbsp; &nbsp; $('#imagemodal').modal('show');&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp;&nbsp;