核心是精准选取缩略图img元素并绑定事件：document.querySelectorAll(".small-img-col img")返回HTMLImageElement，而.small-img-col只选中div容器无src属性；需用data-target与data-main-img实现多模块隔离，onerror防404，touch-action防点透，且alt必须同步更新。
商品详情页点击换图，核心是缩略图与主图的精准绑定和事件隔离——不是所有 img 都能直接赋值 src，也不是所有点击都能正确触发更新。
为什么 document.querySelectorAll(".small-img-col") 会失效？
因为这个选择器返回的是 div 元素集合，而 div 没有 src 属性。常见错误写法 smallImgs[0].src 实际取到 undefined，导致主图变空白或不响应。
- 必须定位到缩略图本身：
document.querySelectorAll(".small-img-col img") - 若 HTML 结构是
img直接操作父容器 - 用
console.log(smallImgs)确认选中的是HTMLImageElement而非HTMLDivElement
如何避免多个商品模块互相干扰？
页面若有多个商品区块（比如推荐位、套装组合），全局变量 currentIndex 或共用 mainImg ID 会导致切换错乱。
- 每个主图用唯一 ID 或
data-main-img属性标识，例如 - 缩略图用
data-target="product-1"显式绑定目标主图 - 事件监听时按
data-target匹配：document.querySelector(`[data-main-img="${e.target.dataset.target}"]`) - 不依赖 DOM 位置关系（如
parentNode.parentNode.querySelector），防止结构微调就崩
图片加载失败怎么不卡住？
线上环境常因路径错误、CDN 缓存失效或权限问题导致某张缩略图 404，用户点完没反应，以为功能坏了。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给主图加
onerror回调：mainImg.onerror = () => mainImg.src = fallbackSrc; - 更稳妥的做法是：在缩略图点击后，先清空
onerror，再设新src，最后重新绑定一次错误处理 - 不要在
onerror里直接调用切换函数，否则连续坏图会无限递归；加计数器限制最多重试 2 次 - 缩略图本身也建议加
onerror并隐藏或加灰显，避免显示断裂图标
移动端点透和快速连点怎么防？
iOS Safari 和部分安卓 WebView 中，快速连点缩略图可能穿透触发下方按钮（比如“加入购物车”），或造成主图闪动、重复加载。
- 给缩略图加 CSS：
style="touch-action: manipulation;"，禁用默认延迟滚动行为 - 点击后立即禁用按钮（
e.target.disabled = true），并在load事件后再恢复 - 避免用内联
onclick，统一用addEventListener方便加节流逻辑 - 不用
setTimeout延迟恢复，改用img.addEventListener("load", ...)确保真实加载完成
最易被忽略的一点：主图 alt 属性必须同步更新。它不只是 SEO 辅助，更是屏幕阅读器用户的唯一信息源——点哪张缩略图，mainImg.alt 就该对应哪张图的描述，不能始终固定为“主展示图”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
