Web设计新手求助：点击缩略图放大图片的事件处理问题

嘿，作为Web设计新手碰到这种事件处理的问题太正常啦！别着急，我来帮你一步步搞定这个需求——不用改HTML/CSS，只靠JavaScript就能实现。

核心思路：事件委托 #

因为要求绑定到id="thumbnails"的div上，我们用事件委托的方式最靠谱：给父容器绑定点击事件，不用给每个缩略图单独加监听，既高效又符合你的限制条件。

完整代码示例 #

// 等DOM加载完成再执行脚本，避免元素找不到
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标元素
  const thumbnailsContainer = document.getElementById('thumbnails');
  const mainDisplayImage = document.querySelector('figure img');
  const mainCaption = document.querySelector('figure figcaption');

  // 给缩略图容器绑定点击事件
  thumbnailsContainer.addEventListener('click', function(e) {
    // 确保点击的是缩略图图片（过滤掉容器内其他元素的点击）
    if (e.target.tagName.toLowerCase() === 'img') {
      // 更新主图的src，实现“放大”效果（如果缩略图对应大图地址存在data属性，可替换为e.target.dataset.large）
      mainDisplayImage.src = e.target.src;
      // 更新figcaption为缩略图的title属性值，处理title为空的情况
      mainCaption.textContent = e.target.title || '无标题';
    }
  });
});

关键细节说明 #

• DOM加载时机：把代码放在DOMContentLoaded事件里，确保脚本执行时所有HTML元素都已经渲染完成，避免出现元素找不到的null错误。
• 事件目标判断：用e.target.tagName检查点击的是不是图片元素，防止点击到容器内的空白区域或其他元素触发不必要的更新。
• 容错处理：给textContent加了默认值'无标题'，避免缩略图没有title属性时显示undefined。

可能的排查点 #

如果脚本还是不生效，可以检查这几点：

• 确认querySelector('figure img')和querySelector('figure figcaption')确实选中了目标元素（可以用console.log(mainDisplayImage)打印看看）。
• 检查缩略图图片的title属性是否正确设置。
• 打开浏览器控制台查看是否有报错信息，排查是否有其他代码冲突。

内容的提问来源于stack exchange，提问作者Clancy