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

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

QA

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

답변 1

본문

 

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

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

흰색을 누르면 흰색으로 바뀌게 하고싶습니다ㅠㅠ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 코드가 좀 더 알맞은 방법이 있는걸까요?
도와주십쇼 ㅠㅠ
 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 29
© SIRSOFT
현재 페이지 제일 처음으로