Question

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

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

所以我希望有人给出建议或给我一个不同的更好的方法来做到这一点。我只在原生javascript中请求帮助。感谢。

document.getElementById("human").addEventListener("click", e => {
  document.getElementById('imageChange').src = "dir/images/human.png";
})
document.getElementById("dwarf").addEventListener("click", e => {
  document.getElementById('imageChange').src = "dir/images/dwarf.png";
})
document.getElementById("elf").addEventListener("click", e => {
  document.getElementById('imageChange').src = "dir/images/elf.png";
})

<img id="imageChange" src="dir/images/human.png" alt="">

<div class="buttonContainer">
  <img src="../dir/images/race/human_male.png" id="human" class="race human_container"></img>
  <img src="../dir/images/race/dwarf_male.png" id="dwarf" class="race dwarf_container"></img>
  <img src="../dir/images/race/elf_male.png" id="elf" class="race elf_container"></img>
</div>

Answer 1

你是对的，拥有多个事件处理程序并不是一个好的解决方案。您可以将单个附加到公共容器。像这样：

document.querySelector(".buttonContainer").addEventListener("click", e => {
  if (e.target.tagName === 'IMG') {
    document.getElementById('imageChange').src = e.target.src    
  }
})

.buttonContainer img {
  height: 30px;
  width: 30px;
}

<img id="imageChange" src="https://cdn2.iconfinder.com/data/icons/oxygen/64x64/mimetypes/unknown.png" alt="">

<div class="buttonContainer">
  <img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/4-64.png" id="human" class="race human_container" />
  <img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/6-64.png" id="dwarf" class="race dwarf_container" />
  <img src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/29-64.png" id="elf" class="race elf_container" />
</div>

有必要检查事件目标e.target.tagName === 'IMG'，因为点击此类绑定事件可能会通过单击图像以外的元素来触发（因此没有src）。

Answer 2

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

Answer 3

var clickables = document.querySelectorAll('.race');

function showImage(e) {
  var src = e.target.src;
  document.getElementById('imageChange').src = src;
}

for (var i = clickables.length - 1; i >= 0; i--) {
  clickables[i].addEventListener('click', showImage);
}

.buttonContainer img {max-width: 100px}

<img id="imageChange" src="https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG" alt=""/>

<div class="buttonContainer">
  <img src="https://vignette.wikia.nocookie.net/nyancat/images/f/ff/Mexinyan.gif/revision/latest?cb=20150409011153" id="human" class="race human_container"/>
  <img src="http://www.nyan.cat/cats/original.gif" id="dwarf" class="race dwarf_container"/>
  <img src="https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG" id="elf" class="race elf_container"/>
</div>

Answer 4

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';

   })
}

我怎么能优化这个js事件？

4 个答案: