우측 작은 이미지 클릭시 좌측 큰이미지에 뜨도록
본문
아무것도 안한 현재 상태입니다
초록색을 누르면 큰화면이 초록색으로 바뀌고
흰색을 누르면 흰색으로 바뀌게 하고싶습니다ㅠㅠ
<div class="con con_01">
<div class="left">
<img src="<?php echo G5_IMG_URL?>/ex_01.png"/>
<a href="#" class="more"><p>+</p></a>
</div>
<div class="right">
<div class="mo_name">
<ul>
<li>RH-200 MINI</a></li>
<li>RH-400</li>
<li>RH-500</a></li>
<li>RH-600</li>
<li>RH-700</li>
<li>RH-800</a></li>
<li>RH-800ES</li>
<li>RH-1000</li>
<li>RH-100ES</li>
</ul>
</div>
<div class="text_box">
<p>· For 1 ton small trucks</p>
<p>· RX Series model that uses electricity as an AC motor drive type</p>
<p>· For 2.5 ton / 3.5 ton / 5.0 ton medium trucks</p>
<p>· For RX Series models that are AC motor driven and use electricity</p>
<p>· Model group applying TM16 / TM21 class compressor</p>
</div>
<div class="img_box">
<ul>
<li class="small active"><img src="<?php echo G5_IMG_URL?>/ex_01.png"/></li>
<li class="small"><img src="<?php echo G5_IMG_URL?>/ex_02.png"/></li>
<li class="small"><img src="<?php echo G5_IMG_URL?>/ex_03.png"/></li>
<li class="small"><img src="<?php echo G5_IMG_URL?>/ex_04.png"/></li>
</ul>
</div>
</div>
</div>
gpt가 이렇게 알려줬는데 안되더라구요ㅠㅠ
<script>
document.addEventListener("DOMContentLoaded", function() {
// 모든 small 이미지 요소에 대해 클릭 이벤트 추가
var smallImages = document.querySelectorAll(".img_box .small");
smallImages.forEach(function(smallImg) {
smallImg.addEventListener("click", function() {
// 클릭한 이미지의 src 가져오기
var imgSrc = smallImg.querySelector("img").getAttribute("src");
// 왼쪽 큰 이미지의 src 변경
document.querySelector(".left img").setAttribute("src", imgSrc);
// 모든 small 이미지 요소에서 active 클래스 제거
smallImages.forEach(function(img) {
img.classList.remove("active");
});
// 클릭한 이미지에 active 클래스 추가
smallImg.classList.add("active");
});
});
});
</script>
스크립트가 틀린건가요?
php 코드가 좀 더 알맞은 방법이 있는걸까요?
도와주십쇼 ㅠㅠ
답변 1
스크립트에서 문제인거죠? 제이쿼리로도 사용 가능할까요?
네 뭐든 되기만 하면요ㅠㅠ 가능할까요?ㅠㅠ
헣허,, 제이쿼리로 하니 해결되었네요 그래도 감사합니다
아~ 네! 작성중이었는데 해결 하시니 다행에요
답변을 작성하시기 전에 로그인 해주세요.
