우측 작은 이미지 클릭시 좌측 큰이미지에 뜨도록

우측 작은 이미지 클릭시 좌측 큰이미지에 뜨도록

QA

우측 작은 이미지 클릭시 좌측 큰이미지에 뜨도록

본문

 

아무것도 안한 현재 상태입니다

초록색을 누르면 큰화면이 초록색으로 바뀌고

흰색을 누르면 흰색으로 바뀌게 하고싶습니다ㅠㅠ1025970347_1712117151.7213.png

 


<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 코드가 좀 더 알맞은 방법이 있는걸까요?
도와주십쇼 ㅠㅠ
 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 59,518
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT