0
<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
                
            })
         })
```
1
  • 1
    Метод closest ищет ближайшего предка по цепочке вверх от родителя к родителю, а у Вас элемент <img class="clothes__img swap-main"> находится на одном уровне иерархии с родителем родителя элемента <img class="iner__img swap-img", поэтому в данном случае closest не сработает.
    – Gene Erbin
    18 ноя 2022 в 13:06

1 ответ 1

-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"

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.