Changing image that opens when you click on dropdown-CodePudding

I made the changing picture that opens when I click on the dropdown. But when I copy this dropdown more than once, the changed image does not work.

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 >
  <a >
    <img id="imageToSwap"  src="https://via.placeholder.com/350x150">
  </a>
  <div >
    <div  data-type="firstOption">test</div>
    <div >
      <div  data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div  data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div  data-type="thirdOption" data-value="https://via.placeholder.com/350x250">
        test3</div>
    </div>
  </div>
</div>


<div >
  <a >
    <img id="imageToSwap"  src="https://via.placeholder.com/350x150">
  </a>
  <div >
    <div  data-type="firstOption">test</div>
    <div >
      <div  data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div  data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div  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>

CodePudding user response：

Question tag with jquery so I shall give you jQuery solution.

Using parents(), which get the ancestors of each element in the current set of matched elements, find img element and give desire attribute src.

Example:

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 >
  <a >
    <img id="imageToSwap"  src="https://via.placeholder.com/350x150">
  </a>
  <div >
    <div  data-type="firstOption">test</div>
    <div >
      <div  data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div  data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div  data-type="thirdOption" data-value="https://via.placeholder.com/350x250">
        test3</div>
    </div>
  </div>
</div>


<div >
  <a >
    <img id="imageToSwap"  src="https://via.placeholder.com/350x150">
  </a>
  <div >
    <div  data-type="firstOption">test</div>
    <div >
      <div  data-type="firstOption" data-value="https://via.placeholder.com/350x150">
        test1
      </div>
      <div  data-type="secondOption" data-value="https://via.placeholder.com/150x350">
        test2
      </div>
      <div  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>