if문을 좀 더 간결하게 바꿀 수 있을까요??
본문
if문에 대해 잘 모르는데.. 검색하면서 작성하긴 했습니다.
원하는 대로 body 부분에 클래스값을 넣어주긴 하는데..
제가 쓴 if문을 좀 더 간결하게 수정할 수 있을까요?
검색하면서 적용은 했는데.. 이렇게 하는 게 맞는 지도 모르겠네요..ㅠㅠ
<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
이렇게 적용할려고 합니다
답변 3
숫자는 동일하므로 "bgBtn"를 "bg-color-"로 치환
<script>
$(function(){
$('.bgColor-btn').click(function(){
$('body')
.removeClass()
.addClass($(this).data('id').replace('bgBtn', 'bg-color-'));
});
})
</script>
감사합니다 ! 배우고 갑니다!
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 문이라는 문법이 있습니다.
참고해보시고 도움이 되셨으면 좋겠습니다. ㅎ
감사합니다 !
<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문을 안써도 될것같네요
감사합니다, if문을 안 써도 되는 부분이었네요 ㅠㅠ 배우고 갑니다!!
답변을 작성하시기 전에 로그인 해주세요.