Нужно чтобы при нажатии на одну из 'swap-img' src ближайшего 'swap-main' менялось на src кликнутого 'swap-img'

Question

<img class="clothes__img swap-main " id="img__hover " src="https://picsum.photos/id/1/300/200" alt="">
<h5 class="clothes__caption">Women's tracksuit Q109</h5>
<div class="clothes__info">
  <p class="clothes__price">$ 38.00</p>
  <form class="form form_margin">
    <div class="form__item">
      <div data-ajax="true" class="rating rating_set">
        <div class="rating__body">
          <div class="rating__active"></div>
          <div class="rating__items">
            <input type="radio" class="rating__item" name="rating" value="1">
            <input type="radio" class="rating__item" name="rating" value="2">
            <input type="radio" class="rating__item" name="rating" value="3">
            <input type="radio" class="rating__item" name="rating" value="4">
            <input type="radio" class="rating__item" name="rating" value="5">
          </div>
        </div>
        <div class="rating__value">3.6</div>
      </div>
    </div>
  </form>
</div>
<div class="hover__block" id="di2">
  <div class="hover__iner onlyOne">
    <img class="iner__img swap-img" src="https://picsum.photos/id/1/300/200" alt="">
    <img class="iner__img swap-img" src="https://picsum.photos/id/7/300/200" alt="">
    <img class="iner__img swap-img" src="https://picsum.photos/id/12/300/200" alt="">
    <img class="iner__img swap-img" src="https://picsum.photos/id/22/300/200" alt="">
  </div>
</div>

данный код не работает так, как на 3 строке js не видит swap-main

```
document.querySelectorAll('.swap-img').forEach(e => {
            e.addEventListener('click', function(ev) {
                ev.target.closest('.swap-main').src = ev.target.src
                
            })
         })
```

Answer 1

У вас нет класса .main-img

document.querySelectorAll('.swap-img').forEach(e => {
    e.addEventListener('click', function(ev) {
      console.log('> ev target closest', ev.target.closest('.main-img'))
      ev.target.closest('.main-img').src = ev.target.src

    })
  })

UPD. То, что нет .main-img в данном случае не важно... class="clothes__img swap-main " не является родительским элементом для class="iner__img swap-img"

БЛОГ НА HUSL

Нужно чтобы при нажатии на одну из 'swap-img' src ближайшего 'swap-main' менялось на src кликнутого 'swap-img'

Ответы (1 шт):