javascript - 更改单击下拉菜单时打开的图像

Question

我制作了单击下拉菜单时打开的不断变化的图片。但是，当我多次复制此下拉菜单时，更改后的图像不起作用。

const image = document.querySelector('.item__img');
const checkbox = document.querySelectorAll('.imgOption');


function clickToChange() {
  let imgsrc = this.getAttribute("data-value");
  console.log(imgsrc);
  image.src = imgsrc;
}

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

<div class="custom_select custom-select1">
  <a class="image_swap image">
    <img id="imageToSwap" 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 id="imageToSwap" 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>

Answer 1

带有 jquery 的问题标签所以我会给你 jQuery 解决方案。

使用parents()获取当前匹配元素集合中每个元素的祖先，找到img元素并赋予desire属性src.

例子:

const image = $('.item__img');
const checkbox = $('.imgOption');

checkbox.on("click", function(index, item) {
  let imgsrc = $(this).data("value");
  $(this).parents(':eq(2)').find('a > .item__img').attr("src", imgsrc);
})

<div class="custom_select custom-select1">
  <a class="image_swap image">
    <img id="imageToSwap" 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 id="imageToSwap" 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.3.1/jquery.min.js"></script>