如何做到这一点，当你点击 ''swap-img " src '' swap -main " 更改为点击的 ''swap-img " 的 src

Question

 let swapImg = document.querySelectorAll('.swap-img'); for(let i = 0; i < swapImg.length; i++){ let show = swapImg[i].closest('.swap-main') swapImg[i].addEventListener('click', (e) =>{ e.target.closest('.swap-main').src = e.target.src }) }

 <img class="clothes__img swap-main " id="img__hover " src="img/clothes__img1.jpg" 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="img/clothes__img8.jpg" alt=""> <img class="iner__img swap-img" src="img/clothes__img2.jpg" alt=""> <img class="iner__img swap-img" src="img/clothes__img3.jpg" alt=""> <img class="iner__img swap-img" src="img/clothes__img7.jpg" alt=""> </div> </div>

this js code is not working, because the fourth line of code doesn't see "swap-main". I'm new to programming, I don't know much, so I hope you can help me with a solution

Answer 1

Check snipper there, from your code javascript to do that:

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

I put pictures from lorem picsum to visually have something.

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

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