SIR
목록으로
이전글 다음글

if문을 좀 더 간결하게 바꿀 수 있을까요?? 채택완료

광광깔
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 2,686
답변 3
목록

if문에 대해 잘 모르는데.. 검색하면서 작성하긴 했습니다.

원하는 대로 body 부분에 클래스값을 넣어주긴 하는데..

제가 쓴 if문을 좀 더 간결하게 수정할 수 있을까요?

검색하면서 적용은 했는데.. 이렇게 하는 게 맞는 지도 모르겠네요..ㅠㅠ

Copy 
<body>

    <button data-id="bgBtn1" class="bgColor-btn bg-color-1">1</button>

    <button data-id="bgBtn2" class="bgColor-btn bg-color-2">2</button>

    <button data-id="bgBtn3" class="bgColor-btn bg-color-3">3</button>

    <button data-id="bgBtn4" class="bgColor-btn bg-color-4">4</button>

 

    <span data-age="13">

 

    </span>

    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

    <script>

        $(function(){

            $('.bgColor-btn').click(function(){

 

                var dataId = $(this).data("id");

                var bodyNoclass = $('body').removeClass();

                

                if (dataId == "bgBtn1") {

                    bodyNoclass;

                    $('body').addClass( 'bg-color-1' );    

                } else if (dataId == "bgBtn2") {

                    bodyNoclass;

                    $('body').addClass( 'bg-color-2' );    

                } else if (dataId == "bgBtn3") {

                    bodyNoclass;

                    $('body').addClass( 'bg-color-3' );    

                } else {

                    bodyNoclass;

                    $('body').addClass( 'bg-color-4' );    

                }

 

            });

        })

    </script>

</body>

1을 누르면 body에 클래스 bg-color-1

2를 누르면 body에 클래스 bg-color-2

3을 누르면 body에 클래스 bg-color-3

4를 누르면 body에 클래스 bg-color-4

이렇게 적용할려고 합니다

#그누보드5

답변 3개

채택된 답변
+20 포인트

숫자는 동일하므로 "bgBtn"를 "bg-color-"로 치환

Copy 
<script>
$(function(){
    $('.bgColor-btn').click(function(){
        $('body')
        .removeClass()
        .addClass($(this).data('id').replace('bgBtn', 'bg-color-'));   
    });
})
</script>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다 ! 배우고 갑니다!

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

Copy 
<body>
    <button data-id="bg-color-1" class="bgColor-btn bg-color-1">1</button>
    <button data-id="bg-color-2" class="bgColor-btn bg-color-2">2</button>
    <button data-id="bg-color-3" class="bgColor-btn bg-color-3">3</button>
    <button data-id="bg-color-4" class="bgColor-btn bg-color-4">4</button>
 
    <span data-age="13">
 
    </span>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script>
            $('.bgColor-btn').click(function(){
                var dataId = $(this).data("id");
                    $('body').removeClass();
                    $('body').addClass( dataId );                    
            });
    </script>
</body>

if문을 안써도 될것같네요

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

답변에 대한 댓글 1개

감사합니다, if문을 안 써도 되는 부분이었네요 ㅠㅠ 배우고 갑니다!!

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

Copy 
switch (dataId) {

    default: //기본

        bodyNoclass;

    case 'bgBtn1': // dataId 값이 bgBtn1 일때 실행

        $('body').addClass('bg-color-1');

        break; // 브레이크를 사용하여 switch 빠져나옴

    case 'bgBtn2':  // dataId 값이 bgBtn2 일때 실행

        $('body').addClass('bg-color-2');

        break;

    case 'bgBtn3':

        $('body').addClass('bg-color-3');

        break;

    case 'bgBtn4':

        $('body').addClass('bg-color-4');

        break;

}

if문이 보기 불편하셔서 그런거라면 switch 문이라는 문법이 있습니다. 

참고해보시고 도움이 되셨으면 좋겠습니다. ㅎ

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

답변에 대한 댓글 1개

감사합니다 !

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

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

로그인
🐛 버그신고