JavaScript 图片源更改 添加事件监听器 "click" 事件。

Question

尝试使用JavaScript将图像源从"images/small/"更改为"images/medium/"

我已尝试以下代码，但由于某些原因单击事件未被捕获，请感谢您提供的任何帮助。

Javascript

var thumbs = document.getElementById("thumbnails");

thumbs.addEventListener("click", function (i) {


    if (i.target.nodeName.toLowerCase() == "img") {
        // get image filename of clicked thumbnail
        var clickedImageSource = i.target.src;

        // replace the folder name of the image 
        var newSrc = clickedImageSource.replace("small","medium");


    }

});

HTML

<div id="thumbnails">
        <img src="images/small/Home.jpg" title="Home" />
        <img src="images/small/Office.jpg" title="Office" />
        <img src="images/small/Park.jpg" title="Park" />
        <img src="images/small/Hills.jpg" title="Hills" />
        <img src="images/small/HaveEyes.jpg" title="HaveEyes" />
    </div>

- Rgrunwald

---

很难在不查看您如何包含JS的情况下确定。这个问题往往是由于在DOM准备好之前调用JS引起的。如果您将脚本包含添加到body的末尾，它应该能够将事件侦听器附加到“缩略图”div上。 - jens

在jsfiddle上运行良好。 - guijob

jsfiddle 很可能使用 DOMContentLoaded 或类似的方法来确保在 DOM 准备就绪后执行 JS。 - jens

假设您在DOM可用后加载脚本，它就能正常工作，您可以通过在点击之前和之后使用console.log来验证。也许问题出在您实际上想要对新生成的路径进行可见操作的地方，比如刷新内容？ - Stacking For Heap

Answer 1

在 DOM 元素可用之前，您无法附加事件监听器。

<script>
  // executed before dom is ready.
  var thumbs = document.getElementById("thumbnails");

  thumbs.addEventListener("click", function(i) {
    console.log('clicked');
  });
</script>
<div id="thumbnails">
  <img src="images/small/Home.jpg" title="Home" />
  <img src="images/small/Office.jpg" title="Office" />
  <img src="images/small/Park.jpg" title="Park" />
  <img src="images/small/Hills.jpg" title="Hills" />
  <img src="images/small/HaveEyes.jpg" title="HaveEyes" />
</div>
<script>
  // executed after dom is ready.
  var thumbs = document.getElementById("thumbnails");

  thumbs.addEventListener("click", function(i) {
    console.log('clicked');
  });
</script>

- jens

---

“在 DOM 元素可用之前，您无法附加事件侦听器。”。然而，通过使用 事件委托，您可以做到这一点，这是动态添加元素的处理方式。 - Spencer Wieczorek

非常感谢大家，我只需要将脚本标签移到body的末尾，代码就可以正常运行了。Pablo是正确的，我没有考虑代码实现的时间。 - Rgrunwald

Pablo只是将我的答案转换成了代码片段，但我明白你的意思。 - jens