点击swap-img切换swap-main图片src失效，求解决方案

你的问题是点击类名为swap-img的图片时，想把swap-main图片的src替换成点击图片的src，但原代码找不到swap-main元素，核心原因是用错了DOM查找方法：

原代码里的e.target.closest('.swap-main')是找当前点击元素的父级/祖先元素中匹配swap-main的节点，但看你的HTML结构，swap-main和swap-img完全不在同一个嵌套层级里，closest根本找不到它，自然会报错。

修复方法很简单，直接提前拿到swap-main元素，然后在点击事件里赋值就行：

修复后的JS代码 #

// 先获取主图元素（页面里唯一的swap-main）
const mainImg = document.querySelector('.swap-main');
// 获取所有要点击的小图
const swapImgs = document.querySelectorAll('.swap-img');

// 给每个小图加点击事件
swapImgs.forEach(img => {
  img.addEventListener('click', function() {
    // 把主图的src换成当前点击小图的src
    mainImg.src = this.src;
  });
});

代码解释 #

• document.querySelector('.swap-main')：直接在整个文档里找第一个匹配swap-main类的元素，你的页面只有一个该元素，刚好适用。
• querySelectorAll('.swap-img')：获取所有带swap-img类的图片。
• forEach遍历每个小图，添加点击事件：用this指代当前被点击的图片（新手更容易理解），直接把主图的src替换成它的src。

另外要注意：如果你的JS代码是放在HTML头部的，记得把代码包裹在DOMContentLoaded事件里，确保DOM加载完成后再执行，避免因DOM未加载完导致找不到元素的问题：

document.addEventListener('DOMContentLoaded', function() {
  const mainImg = document.querySelector('.swap-main');
  const swapImgs = document.querySelectorAll('.swap-img');

  swapImgs.forEach(img => {
    img.addEventListener('click', function() {
      mainImg.src = this.src;
    });
  });
});

内容的提问来源于stack exchange，提问作者Богдан Чистиков