Javascript 如何优化此js活动？

我正在尝试根据我单击的按钮更改img src

我目前的方法是向每个img id添加事件侦听器，然后更改顶部img标记的图像。这个方法的问题是，我会有很多重复的代码，特别是当我添加更多的按钮时

所以我希望有人能给我一些建议，或者给我一个不同的更好的方法。我只请求本机javascript的帮助。谢谢

document.getElementById（“人类”）.addEventListener（“单击”，e=>{
document.getElementById（'imageChange'）.src=“dir/images/human.png”；
})
document.getElementById（“dwarf”）.addEventListener（“单击”，e=>{
document.getElementById（'imageChange'）.src=“dir/images/dwarf.png”；
})
document.getElementById（“elf”）.addEventListener（“单击”，e=>{
document.getElementById（'imageChange'）.src=“dir/images/elf.png”；
})

既然您已经知道要将图像更改为什么，为什么不将其作为数据属性添加到html中，那么就用数据值替换当前src？

既然您已经知道要将图像更改为什么，为什么不将其作为数据属性添加到html中，那么就用数据属性替换当前src值？

您是对的，拥有多个事件处理程序不是一个好的解决方案。您可以将一个连接到公共容器。大概是这样的：

document.querySelector（“.buttonContainer”）.addEventListener（“单击”，e=>{
如果（e.target.tagName=='IMG'）{
document.getElementById（'imageChange'）.src=e.target.src
}
})

.button容器img{
高度：30px；
宽度：30px；
}

---

您是对的，拥有多个事件处理程序不是一个好的解决方案。您可以将一个连接到公共容器。大概是这样的：

document.querySelector（“.buttonContainer”）.addEventListener（“单击”，e=>{
如果（e.target.tagName=='IMG'）{
document.getElementById（'imageChange'）.src=e.target.src
}
})

.button容器img{
高度：30px；
宽度：30px；
}

var clickables=document.querySelectorAll（'.race'）；
函数showImage（e）{
var src=e.target.src；
document.getElementById（'imageChange'）。src=src；
}
对于（var i=clickables.length-1；i>=0；i--）{
可点击[i].添加的EventListener（'click'，showImage）；
}

.button容器img{最大宽度：100px}

var clickables=document.querySelectorAll（'.race'）；
函数showImage（e）{
var src=e.target.src；
document.getElementById（'imageChange'）。src=src；
}
对于（var i=clickables.length-1；i>=0；i--）{
可点击[i].添加的EventListener（'click'，showImage）；
}

.button容器img{最大宽度：100px}

var imageNodes=document.getElementsByClassName（“race”）；
对于（var i=0；i{
const imageId=e.target.id；
document.getElementById（'imageChange'）.src='dir/images/'+imageId+'.png'；
})
}  

var imageNodes=document.getElementsByClassName（“race”）；
对于（var i=0；i{
const imageId=e.target.id；
document.getElementById（'imageChange'）.src='dir/images/'+imageId+'.png'；
})
}  

在发布代码片段之前，您是否尝试过运行它？图像不加载。只向

#buttonContainer

添加一个侦听器，从

e.target

检测单击的图像，并将其操纵的src应用于

#imageChange

或使用单击图像的id构建路径。@Teemu谢谢，如果您有时间，您可以展示一下它的外观的小示例，我不确定我应该如何检测我点击了什么并基于此操作src。看起来dfsq已经回答了这个问题。尽管您必须操作路径，因为新图像似乎来自不同的文件夹。您是否在发布代码片段之前尝试运行它？图像不加载。只向

#buttonContainer

添加一个侦听器，从

e.target

检测单击的图像，并将其操纵的src应用于

#imageChange

或使用单击图像的id构建路径。@Teemu谢谢，如果您有时间，您可以展示一下它的外观的小示例，我不确定我应该如何检测我点击了什么并基于此操作src。看起来dfsq已经回答了这个问题。虽然你必须操纵路径，因为看起来新图像来自不同的文件夹。谢谢，这就是我要找的，我只是不知道如何使用事件目标。你所提供的全部都起作用了，除了它用你点击的按钮替换了img标签的src之外，所以我对它进行了一些修改，所以取而代之的是获取id，并将其应用于src，我想获得正确的img。谢谢，很高兴你找到了。谢谢，这就是我要找的，我只是不知道如何使用事件目标。你所提供的全部都起作用了，除了它用你点击的按钮替换了img标签的src之外，所以我对它进行了一些修改，所以取而代之的是获取id，并将其应用于src，我想获得正确的img。谢谢你，很高兴你明白了。

var imageNodes = document.getElementsByClassName("race");
for(var i = 0; i < imageNodes.length; i++){
   imageNodes[i].addEventListener('click', (e) =>{
   const imageId = e.target.id;
   document.getElementById('imageChange').src = 'dir/images/' + imageId + '.png';

   })
}