Javascript 如何在单击事件时获取图像id

我试图在单击图像时获取图像id，并将其设置为变量。单击列中的第一个图像时，它会工作。单击任何其他图像时，都不会发生任何事情。我尝试了多个不同的单击事件，但无法使其正常工作。非常感谢您提供的任何线索或建议

<div class="row">
    <div class="column">
        <img id="myImg" alt="" src="img/work/3.jpg">
    </div>
    <div class="column">
        <img id="myImg1" alt="" src="img/work/4.jpg">
    </div>
    <div class="column">
        <img id="myImg2" alt="" src="img/work/6.jpg">
    </div>
</div>

<div id="myModal" class="modal">

 <!-- The Close Button -->
 <span class="close">&times;</span>

 <!-- Modal Content (The Image) -->
 <img class="modal-content" id="img01">

 <!-- Modal Caption (Image Text) -->
 <div id="caption"></div>
 </div>

 <script type="text/javascript">
 var img = document.getElementById("myImg");
 document.addEventListener('click', function(e) {
img = document.getElementById(e.target.id);
 }, false);

 var modal = document.getElementById("myModal");

 //Get the image and insert it inside the modal - use its "alt" text as a 
 caption
 var modalImg = document.getElementById("img01");
 var captionText = document.getElementById("caption");
 img.onclick = function(){
 modal.style.display = "block";
 modalImg.src = this.src;
 captionText.innerHTML = this.alt;
 }

 //Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 //When the user clicks on <span> (x), close the modal
 span.onclick = function() { 
 modal.style.display = "none";
 }
 </script>

&时代；
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

只需将

事件添加到
onclick
函数调用中，然后对
事件.target.id执行所需操作即可：

img.onclick = function(event){
     console.log(event.target.id);
     modal.style.display = "block";
     modalImg.src = this.src;
     captionText.innerHTML = this.alt;
}

您可以尝试向文档上的每个图像添加单击处理程序

var imageClickHandler = function() {
    img = this.id;
}

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onclick = imageClickHandler;
}

var imageClickHandler=函数（）{
img=this.id；
}
var images=document.getElementsByTagName（'img'）；
对于（var i=0；i
您让侦听器只复制var img（myImg）的初始值，让代码（img.onclick=function（）{}）运行一次；我在click listener中做了一个快速修复：

<script type="text/javascript">

var img = document.getElementById("myImg2");
document.addEventListener('click', function(e) {
    var targetId = e.target.id;
    //simple id filter
    if(targetId == "myImg" || targetId == "myImg1" || targetId == "myImg2"){
        img = document.getElementById(e.target.id);
        console.log("img")
        modal.style.display = "block";
        modalImg.src = img.src;
        captionText.innerHTML = img.alt;
    }
}, false);

var modal = document.getElementById("myModal");

//Get the image and insert it inside the modal - use its "alt" text as a 
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

 //Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
//When the user clicks on <span> (x), close the modal
span.onclick = function() { 
    modal.style.display = "none";
}


</script>


var img=document.getElementById（“myImg2”）；
document.addEventListener（'click'，函数（e）{
var targetId=e.target.id；
//简单id过滤器
如果（targetId==“myImg”| | targetId==“myImg1”| | targetId==“myImg2”）{
img=document.getElementById（例如target.id）；
控制台日志（“img”）
modal.style.display=“块”；
modalImg.src=img.src；
captionText.innerHTML=img.alt；
}
}，假）；
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

但更好的方法是将所有图像放在一个类中，并将侦听器一个接一个地打开，如您在上所看到的。
首先，问题是您只将单击事件添加到第一个图像中。您应该为图像使用类，为关闭按钮使用id。为图像添加一个类：

<div class="column">
    <img class="myImg" alt="" src="img/work/3.jpg">
</div>
<div class="column">
    <img class="myImg" alt="" src="img/work/4.jpg">
</div>
<div class="column">
    <img class="myImg" alt="" src="img/work/6.jpg">
</div>

将事件处理程序分配给id为关闭的span：

$('#close').click(function() { modal.style.display = 'none'; });

完了！它应该可以工作。
为什么使用jQuery标记？可能重复
$('.myImg').click(function() {
    modal.style.display = 'block';
    modalImg.src = this.attr('src');
    captionText.innerText = this.attr('alt');
});

$('#close').click(function() { modal.style.display = 'none'; });