如何做到這一點，當你點擊 ''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>

此 js 代碼不起作用，因為第四行代碼沒有看到“swap-main”。 剛接觸編程，了解不多，希望大家能幫我解答

Answer 1

檢查 snipper 那里，從你的代碼 javascript 做到這一點：

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

我把 lorem picsum 的圖片放在視覺上有一些東西。

 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>