有没有办法使用循环在多个图像上执行onclick功能？
有没有办法使用循环在多个图像上执行onclick功能？
提问于 2020-05-18 11:11:20
因此，我有三个图像，在单击它们中的任何一个都应该执行相同的函数时，我想实现一个函数，以减少我的代码长度。下面是代码库的一个示例：
Js代码：
let doorImage1 = document.getElementById('door1')
let doorImage2 = document.getElementById('door2')
let doorImage3 = document.getElementById('door3')
const botDoorPath = "new-url"
doorImage1.onclick = () => {
doorImage1.src = botDoorPath
}
doorImage2.onclick = () => {
doorImage2.src = botDoorPath
}
doorImage3.onclick = () => {
doorImage3.src = botDoorPath
}回答 5
Stack Overflow用户
回答已采纳
发布于 2020-05-18 11:20:11
稍微更改一下代码，您可以向每个图像元素添加一个类，让我们称其为door，然后选择具有该类的所有元素并循环通过它以应用onclick函数。
let doorImages = document.querySelectorAll('.door')
const botDoorPath = "new-url"
for (let i = 0; i < doorImages.length; i++){
let anImage = doorImages[i]
anImage.onclick = () => (
anImage.src = botDoorPath
)
}Stack Overflow用户
发布于 2020-05-18 11:19:59
您还可以执行以下操作：
const botDoorPath = "new-url"
document.querySelectorAll('#door1, #door2, #door3' )
.forEach(imgElm=>{
imgElm.onclick=()=>
{
console.clear()
console.log('img clicked =', imgElm.id )
imgElm.src = botDoorPath
}
})<img id="door1" src="xxxx">
<img id="door2" src="yyyy">
<img id="door3" src="zzzz">
Stack Overflow用户
发布于 2020-05-18 11:16:25
你可以用class代替id来做onclick
let doorImage = document.querySelectorAll('.doors') //select all the elem that name of doors
const botDoorPath = "new-url"
doorImage.forEach(elem => elem.addEventListener('click', () => { //loop the elem and assign the click event
elem.src = botDoorPath;
console.log(elem)
}))<img class="doors" id="1" src="3">
<img class="doors" id="2" src="3">
<img class="doors" id="3" src="3">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61861842
复制相关文章
相似问题
腾讯云开发者
