为什么Onclick函数仅在每个循环的第一次迭代中起作用

编程问答 2022-06-12

问题描述

我有一个代码，其中使用foreach循环显示一组图像，单击该代码应在控制台中返回图像名称。

我尝试了以下代码：

    <?PHP

    foreach ($gallery as $i) {

    ?>
    <img src="<?PHP echo "$i"; ?>" id="modal_img">

   <?PHP }
    ?>

上面的代码是通过foreach循环迭代显示图像的代码。

    $(function(){
       $("#modal_img").on("click",function(){
       var src = $(this).attr("src");
        console.log(src);
       })
     })

但是使用此代码，每次尝试时，只有第一个图像在控制台中产生结果，而其他图像在单击时在控制台日志中均没有响应。有人可以帮我解决这个问题吗？我已经附上了下面的屏幕图像，其中显示了图像的显示方式。

enter image description here

解决方法

ID是unique

将ID替换为Class HTML和JS代码

<img src="<?php echo "$i"; ?>" class="modal_img"> 

$(function(){
       $(".modal_img").on("click",function(){
       var src = $(this).attr("src");
        console.log(src);
       })
     })
,

因为您不能多次使用同一个ID，所以请使用类或标签选择器

像这样： 将其更改为课程

    <img src="<?php echo "$i"; ?>" class="modal_img">

然后

$(".modal_img").on('click',function(event){
 var src = $(this).attr("src");
    console.log(src);
   })
});
foreachhtmljquery