从 php While 循环中调用的 jQuery 脚本无法正常工作

Posted 2023-05-09

【中文标题】从 php While 循环中调用的 jQuery 脚本无法正常工作

【英文标题】：jQuery Script called from within php While loop not working properly

【发布时间】：2017-10-13 02:34:46

【问题描述】：

我有一个 php 部分页面，它从 mysql 数据库中获取图像并使用 while 循环在浏览器中打印它们。当我单击其中一个图像时，会调用一个 jQuery 函数——这个函数应该抓取img 的src，然后在弹出窗口中提醒用户src 是什么。这个src 应该根据点击的img 而改变。

生成的页面是一系列图像及其各自的数据字段，如下图所示：

不幸的是，无论单击哪个img，都会提醒相同的src，并且它似乎是从while循环打印的最后一个img。

这是点击img 时弹出的提醒 - 每张照片都应该是唯一的，但目前来源相同：

我怎样才能得到这个imgsrc，它被提醒对于每个被点击的img都是唯一的？

编辑：我还应该说，当在 while 循环之外进行测试时，这个 jQuery 脚本似乎可以按预期工作 - 点击的不同图像会提醒不同的 src 属性。

 <div id="screenings">
    <?php

        //MySQL database connection established

        ...

        while ($row = mysqli_fetch_array($result))
            echo "<div class='img_div'>";
                echo "<img class='modal_img img_screenings' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";

                ...

            echo "</div>";
        
    ?>
 </div>

 <modal id="custom-modal-1">
     <div class="modal">
        <div class="modal-body">
                <img id="popup_img" src="#">
        </div>
     </div>
     <div class="modal-background"></div>
</modal>

<script>
    $('.img_div').on("click", function() 
        var source = ( $('.modal_img').attr("src") );
        alert(source);
        $('#popup_img').prop('src', this.src);
    );
</script>

【问题讨论】：

PHP 和while 在这里无关，能否将生成的源添加到问题中。我认为你应该使用 $(this) 代替 $('.modal_img') 但我需要测试一下，我很少使用 JS

你的意思是这个部分在完整的 html 上下文中会是什么样子？

echo "<div class='img_div'>"; 和其他 PHP 生成什么？

啊，我明白了 - 更新了上下文快照。我正在尝试构建一个适用于这些图像的模式弹出窗口。

还添加了警报弹出的图片

【参考方案1】：

问题是var source = ( $('.modal_img').attr("src") ); 这将获得与该类匹配的项目的第一个 src 属性。但是所有的图像都有相同的类。您应该在$('.img_div').on("click", function() 中使用$(this) 来引用点击的<div>。试试var source = $(this).find('img').attr('src'));，它应该会在点击的$(this) 项目中获得第一个img 的<img> 标签src 属性。

【讨论】：

是的，做到了。谢谢！