点击文本选项同步激活对应图片的实现问题求助

嗨，看起来你已经搞定了文本选项的激活逻辑，只差把对应图片的同步显示功能补上啦！其实这个问题很容易解决——因为你的文本选项和图片是按顺序一一对应的，我们可以利用它们的索引位置来匹配关联，具体做法如下：

核心思路 #

1. 当点击某个文本选项时，先获取它在所有文本选项列表里的索引位置
2. 和处理文本选项的逻辑一致，先移除所有图片的active类，避免多个图片同时显示
3. 给对应索引位置的图片添加active类，让它显示出来

修改后的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
  const textOption = document.querySelectorAll(".text-option");
  const selectableImage = document.querySelectorAll(".selectable-image")

  function clickedTextOption(clickedOption) {
    // 处理文本选项的激活状态
    textOption.forEach(option => {
      option.classList.remove("active");
    });
    clickedOption.classList.add("active");

    // 新增：处理对应图片的显示状态
    const currentIndex = Array.from(textOption).indexOf(clickedOption);
    selectableImage.forEach(img => {
      img.classList.remove("active");
    });
    selectableImage[currentIndex].classList.add("active");
  }

  textOption.forEach(option => {
    option.addEventListener("click", () => {
      clickedTextOption(option);
    });
  });
});

代码说明 #

• Array.from(textOption).indexOf(clickedOption)：把textOption这个NodeList转换成数组，然后获取当前点击选项的索引
• 之后用这个索引去selectableImage列表里找到对应的图片，再给它加上active类，和文本选项的激活逻辑完全对应

这样修改后，你点击第一个文本选项，第一个图片就会显示；点击第二个文本选项，第二个图片就会显示，完美实现你想要的联动效果～

备注：内容来源于stack exchange，提问作者DustyKrumples