点击Dropdown切换图片功能复制多份后失效的技术求助

核心问题 #

1. 单个图片元素绑定：你用document.querySelector('.item__img')只获取了页面中第一个匹配的图片元素，所以不管点击哪个Dropdown，只会修改第一张图的src。
2. 重复ID违规：两个<img>标签用了同一个id="imageToSwap"，HTML规范要求ID必须唯一，这会导致DOM选择逻辑混乱。

修复代码 #

修改后的HTML（去掉重复ID，保持结构）

<div class="custom_select custom-select1">
  <a class="image_swap image">
    <img class="item__img" src="https://via.placeholder.com/350x150">
  </a>
  <div class="select">
    <div class="selectBtn" data-type="firstOption">test</div>
    <div class="selectDropdown mm-dropdown">
      <div class="option imgOption" data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div class="option imgOption" data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div class="option imgOption" data-type="thirdOption" data-value="https://via.placeholder.com/350x250">
        test3</div>
    </div>
  </div>
</div>

<div class="custom_select custom-select2">
  <a class="image_swap image">
    <img class="item__img" src="https://via.placeholder.com/350x150">
  </a>
  <div class="select">
    <div class="selectBtn" data-type="firstOption">test</div>
    <div class="selectDropdown mm-dropdown">
      <div class="option imgOption" data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div class="option imgOption" data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div class="option imgOption" data-type="thirdOption" data-value="https://via.placeholder.com/350x250">
        test3</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

修改后的JavaScript（关联选项与对应容器内的图片）

const checkbox = document.querySelectorAll('.imgOption');

function clickToChange() {
  // 获取当前选项所属的自定义选择器容器
  const container = this.closest('.custom_select');
  // 在容器内找到对应的图片元素
  const image = container.querySelector('.item__img');
  // 更新图片src
  const imgsrc = this.getAttribute("data-value");
  image.src = imgsrc;
}

checkbox.forEach(check => check.addEventListener('click', clickToChange));

关键逻辑说明 #

• 用this.closest('.custom_select')定位到当前点击选项所在的父容器，确保每个Dropdown的操作只影响自己内部的图片。
• 不再依赖全局的图片元素引用，而是每次点击时动态获取对应容器内的图片，完美支持多组件复用场景。
• 移除了重复ID，符合HTML规范，避免潜在的DOM选择问题。

内容的提问来源于stack exchange，提问作者huseyn ismayilov