本文介绍一种基于 DOM 元素索引匹配的交互方案：点击 .text-option 文本项时，不仅为其添加 active 类，还能精准同步激活同序号的 .selectable-image 图片，实现图文联动效果。
本文介绍一种基于 dom 元素索引匹配的交互方案：点击 `.text-option` 文本项时，不仅为其添加 `active` 类，还能精准同步激活同序号的 `.selectable-image` 图片，实现图文联动效果。
在构建图文切换式内容区域（如产品特性说明、步骤引导页）时，常需实现“点击文字项 → 高亮该文字 + 显示对应图片”的双向联动。核心难点在于：两个元素位于不同容器中，无法直接通过父子/兄弟关系定位，但它们按顺序一一对应。此时，利用 NodeList 的索引一致性是最简洁可靠的解决方案。
✅ 正确实现逻辑
关键在于：在遍历 .text-option 时，同时获取其索引 index，并用该索引访问同位置的 .selectable-image 元素：
document.addEventListener("DOMContentLoaded", function () {
const textOptions = document.querySelectorAll(".text-option");
const images = document.querySelectorAll(".selectable-image");
function handleTextClick(clickedOption) {
textOptions.forEach((option, index) => {
// 切换当前项的 active 状态（仅当前项为 true）
const isActive = option === clickedOption;
option.classList.toggle("active", isActive);
// 同步切换对应索引的图片 active 状态
images[index]?.classList.toggle("active", isActive);
});
}
textOptions.forEach(option => {
option.addEventListener("click", () => handleTextClick(option));
});
});
? 为什么用 toggle(className, boolean)？
它比手动 remove() + add() 更安全高效：自动处理类存在性判断，避免重复操作；且语义清晰——“让第 i 个图片的 active 状态与第 i 个文本项保持一致”。
? CSS 注意事项
为确保图片显示逻辑生效，请注意以下样式细节：
- 使用 img.selectable-image.active 而非 .image-container .selectable-image.active，避免层级干扰；
- 将 opacity: 0 和 opacity: 1 直接作用于 img 元素（而非容器），并用子选择器 > 精准控制；
- 移除冗余的 display: flex 等可能影响图片渲染的容器样式（.image-container 本身已设 flex，内部 img 无需再设）。
优化后的关键 CSS 片段如下：
.image-container > img {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.3s ease; /* 推荐添加平滑过渡 */
}
.image-container > .selectable-image.active {
opacity: 1;
}
⚠️ 实用建议与边界处理
- 索引对齐是前提：确保 HTML 中 .text-option 与 .selectable-image 的数量一致、顺序严格对应。若数据动态生成，务必保证渲染顺序一致。
- 空值防护：使用 images[index]?.classList...（可选链操作符）防止因图片数量不足导致脚本报错。
- 初始状态统一：示例中首张图默认带 active 类，对应首个 .text-option 也含 active —— 这种初始化必须同步，否则首次交互可能出现错位。
- 无障碍增强（进阶）：为 .text-option 添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键事件，提升键盘可访问性。
通过这一模式，你无需引入框架或复杂状态管理，仅用原生 JavaScript 即可实现轻量、可靠、易维护的图文联动交互。
