本文介绍如何通过 javascript 实现“点击一个文本项，同时为其添加 active 类并显示同序号的图片”的联动交互，核心在于利用 nodelist 索引匹配与 classlist.toggle 的精准控制。
本文介绍如何通过 javascript 实现“点击一个文本项，同时为其添加 active 类并显示同序号的图片”的联动交互，核心在于利用 nodelist 索引匹配与 classlist.toggle 的精准控制。
在构建响应式内容切换组件（如产品特性说明、步骤引导或图文对照面板）时，常需让左侧文本选项与右侧图片按顺序一一对应：点击第 N 个 .text-option，不仅自身高亮，还同步显示第 N 张 .selectable-image。关键难点在于跨容器关联 DOM 元素——二者物理位置分离，但逻辑顺序严格对齐。
解决方案的核心是索引驱动的双向同步。我们不再分别清除所有 active 类再单独添加，而是借助 forEach 的 index 参数，在遍历 .text-option 时，同步操作同索引位置的 .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.classList.toggle("active", option === clickedOption);
// 同步切换对应图片的 active 状态
images[index]?.classList.toggle("active", isActive);
});
}
textOptions.forEach(option => {
option.addEventListener("click", () => handleTextClick(option));
});
});✅ 代码亮点说明：
-
classList.toggle(className, force)是关键：force为true时强制添加，false时强制移除，避免手动remove+add的冗余逻辑； -
images[index]?.classList...使用可选链（?.）提升健壮性，防止因 DOM 元素数量不一致导致脚本报错； - 所有状态变更集中于一次遍历，性能高效且逻辑清晰。
配套 CSS 需确保图片默认隐藏、仅 active 时可见。注意选择器精度：应使用 .image-container > img 和 .image-container > .selectable-image.active，避免样式污染或层级穿透问题（原 CSS 中嵌套写法在部分预处理器中可能编译异常，显式子选择器更可靠）：
.image-container > img {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.3s ease; /* 推荐添加平滑过渡 */
}
.image-container > .selectable-image.active {
opacity: 1;
}⚠️ 注意事项：
- 文本项与图片数量必须严格一致，否则未配对的图片将无法被激活（可通过
console.warn在开发环境校验长度）； - 若后续动态增删 DOM 节点，需重新调用
querySelectorAll或采用事件委托方案； - 移动端需确认
click事件兼容性，必要时补充touchstart事件（但本例中click在现代移动浏览器中已足够可靠）。
此方案简洁、可维护性强，无需额外数据属性或 ID 绑定，纯粹依赖 DOM 顺序，特别适合静态结构明确的多步骤展示场景。
