테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

자바스크립트 질문이 있습니다. 채택완료

한번잘해보자 8개월 전 조회 3,067
답변 1
목록 

</p>

<p><div class="section"></p>

<p>    <div class="inner"></p>

<p>        <ul class="type_btn_wrap"></p>

<p>            <li class="btn01 active"></p>

<p>                1</p>

<p>            </li></p>

<p>            <li class="btn02"></p>

<p>                2</p>

<p>            </li></p>

<p>            <li class="btn03"></p>

<p>                3</p>

<p>            </li></p>

<p>            <li class="btn04"></p>

<p>                4</p>

<p>            </li></p>

<p>            <li class="btn05"></p>

<p>                5</p>

<p>            </li></p>

<p>            <li class="btn06"></p>

<p>                6</p>

<p>            </li></p>

<p>        </ul></p>

<p>        <div class="type_wrap type01 active">1</div></p>

<p>        <div class="type_wrap type02">2</div></p>

<p>        <div class="type_wrap type03">3</div></p>

<p>        <div class="type_wrap type04">4</div></p>

<p>        <div class="type_wrap type05">5</div></p>

<p>        <div class="type_wrap type06">6</div></p>

<p>    </div></p>

<p></div></p>

<p>

 

버튼 클릭시 하단 컨텐츠가 바뀌는 방식인데

자바스크립트를 쌩 노가다 처럼 입력하고 있는데 혹시 간편한 방법이 없나 궁금해서 질문드립니다.

현재는 아래와 같이 작업을 하고 있습니다

 

</p>

<p> </p>

<p>$(function(){</p>

<p>    $(".type_btn_wrap .btn01").click(function(){</p>

<p>    $(".type_btn_wrap .btn01").addClass("active");</p>

<p>    $(".type_btn_wrap .btn02").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn03").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn04").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn05").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn06").removeClass("active");</p>

<p>    $(".type_wrap .type01").addClass("active");</p>

<p>    $(".type_wrap .type02").removeClass("active");</p>

<p>    $(".type_wrap .type03").removeClass("active");</p>

<p>    $(".type_wrap .type04").removeClass("active");</p>

<p>    $(".type_wrap .type05").removeClass("active");</p>

<p>    $(".type_wrap .type06").removeClass("active");</p>

<p> </p>

<p>    });</p>

<p>});</p>

<p> </p>

<p>$(function(){</p>

<p>    $(".type_btn_wrap .btn02").click(function(){</p>

<p>    $(".type_btn_wrap .btn02").addClass("active");</p>

<p>    $(".type_btn_wrap .btn01").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn03").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn04").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn05").removeClass("active");</p>

<p>    $(".type_btn_wrap .btn06").removeClass("active");</p>

<p>    $(".type_wrap .type02").addClass("active");</p>

<p>    $(".type_wrap .type01").removeClass("active");</p>

<p>    $(".type_wrap .type03").removeClass("active");</p>

<p>    $(".type_wrap .type04").removeClass("active");</p>

<p>    $(".type_wrap .type05").removeClass("active");</p>

<p>    $(".type_wrap .type06").removeClass("active");</p>

<p>    });</p>

<p>});</p>

<p> </p>

<p>.</p>

<p>.</p>

<p>.</p>

<p>.</p>

<p>.6번 까지 반복...</p>

<p>

#자바스크립트
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
glitter0gim
glitter0gim
8개월 전

현재 구현 방식은 각 버튼마다 별도의 클릭 이벤트를 등록해 클래스 토글을 수행하고 있어

코드의 중복이 많고 유지보수 측면에서 비효율적입니다.

이를 개선한, 버튼과 콘텐츠를 인덱스 기반으로 접근하는 방법이 있습니다.

</p>

<p>$(function(){

    $('.type_btn_wrap li').click(function(){

        var index = $(this).index(); // 클릭한 버튼의 인덱스 가져오기</p>

<p>        // 모든 버튼과 콘텐츠에서 active 클래스 제거

        $('.type_btn_wrap li').removeClass('active');

        $('.type_wrap').removeClass('active');</p>

<p>        // 해당 버튼과 콘텐츠에 active 클래스 추가

        $(this).addClass('active');

        $('.type_wrap').eq(index).addClass('active');

    });

});</p>

<p>
이와 같이 작성하면 버튼의 수가 늘어나더라도

코드 변경 없이 자동으로 대응할 수 있어 유지보수와 가독성이 크게 향상됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
한번잘해보자
8개월 전
너무너무 감사합니다 예시 소스 가지고 공부해보겠습니다!
g
glitter0gim
8개월 전
저도 한 수 배워갑니다. (●'◡'●)

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인