本文介绍一种基于 DOM 元素索引映射的 JavaScript 实现方案，用于在点击 .text-option 文本项时，同时为其添加 active 类，并同步激活同序号的 .selectable-image 图片元素，实现图文联动效果。
本文介绍一种基于 dom 元素索引映射的 javascript 实现方案，用于在点击 `.text-option` 文本项时，同时为其添加 `active` 类，并同步激活同序号的 `.selectable-image` 图片元素，实现图文联动效果。
在构建交互式内容展示区域（如产品特性说明、步骤引导或选项预览）时，常需实现“点击文字项 → 高亮该文字 + 显示对应图片”的双向联动。核心挑战在于：两个目标元素（.text-option 和 .selectable-image）物理上分离于不同容器，无法直接通过父子/兄弟关系定位，但逻辑上严格按顺序一一对应。
解决方案的关键在于利用 NodeList.forEach() 的索引参数建立位置映射，而非依赖 DOM 层级关系。以下为优化后的完整实现：
✅ JavaScript 逻辑（推荐写法）
document.addEventListener("DOMContentLoaded", function () {
const textOptions = document.querySelectorAll(".text-option");
const images = document.querySelectorAll(".selectable-image");
function activateOption(option) {
textOptions.forEach((el, index) => {
const isActive = el === option;
el.classList.toggle("active", isActive);
// 同步控制对应序号的图片：仅当存在且索引有效时操作
if (images[index]) {
images[index].classList.toggle("active", isActive);
}
});
}
textOptions.forEach(option => {
option.addEventListener("click", () => activateOption(option));
});
});? 为什么用 toggle(className, condition)？
相比先 removeAll 再 addClass，toggle 更简洁安全：它根据布尔值自动增删类名，避免重复操作或状态残留；同时天然支持「单选互斥」逻辑——每次点击只激活一个选项及其对应图片。
✅ CSS 样式关键调整
原 CSS 中 .selectable-image.active 的选择器作用域过宽（可能受嵌套影响），建议明确限定层级，并分离基础样式与状态样式：
.image-container > img {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.3s ease; /* 推荐添加平滑过渡 */
}
.image-container > .selectable-image.active {
opacity: 1;
}
.text-option.active {
border-left: 4px solid var(--primary);
padding-left: calc(min(50px, 2svw) - 4px);
}⚠️ 注意事项：
- 确保 .text-option 与 .selectable-image 的数量一致，且 HTML 中顺序严格对齐（第 1 个 text-option 对应第 1 个 selectable-image）；
- 若图片初始需默认显示，仅需在首个 <img> 上保留 active 类（如示例所示），脚本会自动维护状态一致性；
- 添加 transition: opacity 0.3s 可显著提升视觉体验，避免图片突显；
- 生产环境建议增加容错：if (images[index]) { ... } 防止因 DOM 不匹配导致脚本报错。
此方案轻量、可扩展、语义清晰，无需引入框架或复杂状态管理，适用于静态站点、CMS 页面或渐进式增强场景。
