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

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

 $(function() {

    $('.pop').on('click', function() {

        /* or should that be $( this ) ?? */

        let child=this.querySelector('img.imageresource')

        $('.imagepreview').attr( 'src', child.src );

        $('#imagemodal').modal('show');   

    });     

});

Answer 2

如果您正在寻找基于纯jquery的解决方案，那么您可以使用以下代码

    $('.pop').on('click', function() {

        var imgSrc = $(this).children('.imageresource').attr('src'); //get image src here

        $('.imagepreview').attr('src', imgSrc );

        $('#imagemodal').modal('show');   

    });