商品页主图切换教程详解

✅ 正确做法：精准定位图片元素 + 统一事件委托

核心在于两点：

1. 准确获取目标 元素（而非包裹它的
   ）；
2. 为每个缩略图 绑定点击事件，并动态将自身 src 赋值给主图。

推荐使用 document.querySelectorAll() 配合 CSS 选择器精确定位：

// 获取主图元素
const mainImg = document.getElementById("MainImg");

// 精确选取所有缩略图 <img>（而非 .small-img-col 容器）
const thumbnailImgs = document.querySelectorAll(".small-img-col img");

// 为每个缩略图绑定点击事件
thumbnailImgs.forEach(thumb => {
  thumb.addEventListener("click", function() {
    mainImg.src = this.src; // this 指向当前被点击的缩略图 <img>
    mainImg.alt = this.alt || "Product detail image"; // 可选：同步 alt 文本提升可访问性
  });
});

⚠️ 关键注意事项

• DOM 加载时机：确保脚本在 HTML 解析完成后再执行。推荐将