자바스크립트 질문이 있습니다.

한번잘해보자 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2025.02.27 12:40:26 2922 (58.♡.♡.147)

본문


<div class="section">
    <div class="inner">
        <ul class="type_btn_wrap">
            <li class="btn01 active">
                1
            </li>
            <li class="btn02">
                2
            </li>
            <li class="btn03">
                3
            </li>
            <li class="btn04">
                4
            </li>
            <li class="btn05">
                5
            </li>
            <li class="btn06">
                6
            </li>
        </ul>
        <div class="type_wrap type01 active">1</div>
        <div class="type_wrap type02">2</div>
        <div class="type_wrap type03">3</div>
        <div class="type_wrap type04">4</div>
        <div class="type_wrap type05">5</div>
        <div class="type_wrap type06">6</div>
    </div>
</div>

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

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

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


 
$(function(){
    $(".type_btn_wrap .btn01").click(function(){
    $(".type_btn_wrap .btn01").addClass("active");
    $(".type_btn_wrap .btn02").removeClass("active");
    $(".type_btn_wrap .btn03").removeClass("active");
    $(".type_btn_wrap .btn04").removeClass("active");
    $(".type_btn_wrap .btn05").removeClass("active");
    $(".type_btn_wrap .btn06").removeClass("active");
    $(".type_wrap .type01").addClass("active");
    $(".type_wrap .type02").removeClass("active");
    $(".type_wrap .type03").removeClass("active");
    $(".type_wrap .type04").removeClass("active");
    $(".type_wrap .type05").removeClass("active");
    $(".type_wrap .type06").removeClass("active");
 
    });
});
 
$(function(){
    $(".type_btn_wrap .btn02").click(function(){
    $(".type_btn_wrap .btn02").addClass("active");
    $(".type_btn_wrap .btn01").removeClass("active");
    $(".type_btn_wrap .btn03").removeClass("active");
    $(".type_btn_wrap .btn04").removeClass("active");
    $(".type_btn_wrap .btn05").removeClass("active");
    $(".type_btn_wrap .btn06").removeClass("active");
    $(".type_wrap .type02").addClass("active");
    $(".type_wrap .type01").removeClass("active");
    $(".type_wrap .type03").removeClass("active");
    $(".type_wrap .type04").removeClass("active");
    $(".type_wrap .type05").removeClass("active");
    $(".type_wrap .type06").removeClass("active");
    });
});
 
.
.
.
.
.6번 까지 반복...

#자바스크립트

답변 1

glitter0gim 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2025-02-27 12:50:02 115.♡.♡.228

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

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

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


$(function(){
    $('.type_btn_wrap li').click(function(){
        var index = $(this).index(); // 클릭한 버튼의 인덱스 가져오기
        // 모든 버튼과 콘텐츠에서 active 클래스 제거
        $('.type_btn_wrap li').removeClass('active');
        $('.type_wrap').removeClass('active');
        // 해당 버튼과 콘텐츠에 active 클래스 추가
        $(this).addClass('active');
        $('.type_wrap').eq(index).addClass('active');
    });
});

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

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