if문을 좀 더 간결하게 바꿀 수 있을까요?? 채택완료
광깔
5년 전
조회 2,628
if문에 대해 잘 모르는데.. 검색하면서 작성하긴 했습니다.
원하는 대로 body 부분에 클래스값을 넣어주긴 하는데..
제가 쓴 if문을 좀 더 간결하게 수정할 수 있을까요?
검색하면서 적용은 했는데.. 이렇게 하는 게 맞는 지도 모르겠네요..ㅠㅠ
</p>
<p><body></p>
<p> <button data-id="bgBtn1" class="bgColor-btn bg-color-1">1</button></p>
<p> <button data-id="bgBtn2" class="bgColor-btn bg-color-2">2</button></p>
<p> <button data-id="bgBtn3" class="bgColor-btn bg-color-3">3</button></p>
<p> <button data-id="bgBtn4" class="bgColor-btn bg-color-4">4</button></p>
<p> </p>
<p> <span data-age="13"></p>
<p> </p>
<p> </span></p>
<p> <script src="<a href="https://code.jquery.com/jquery-3.5.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.5.0.min.js"></script></a></p>
<p> <script></p>
<p> $(function(){</p>
<p> $('.bgColor-btn').click(function(){</p>
<p> </p>
<p> var dataId = $(this).data("id");</p>
<p> var bodyNoclass = $('body').removeClass();</p>
<p> </p>
<p> if (dataId == "bgBtn1") {</p>
<p> bodyNoclass;</p>
<p> $('body').addClass( 'bg-color-1' ); </p>
<p> } else if (dataId == "bgBtn2") {</p>
<p> bodyNoclass;</p>
<p> $('body').addClass( 'bg-color-2' ); </p>
<p> } else if (dataId == "bgBtn3") {</p>
<p> bodyNoclass;</p>
<p> $('body').addClass( 'bg-color-3' ); </p>
<p> } else {</p>
<p> bodyNoclass;</p>
<p> $('body').addClass( 'bg-color-4' ); </p>
<p> }</p>
<p> </p>
<p> });</p>
<p> })</p>
<p> </script></p>
<p></body></p>
<p>
1을 누르면 body에 클래스 bg-color-1
2를 누르면 body에 클래스 bg-color-2
3을 누르면 body에 클래스 bg-color-3
4를 누르면 body에 클래스 bg-color-4
이렇게 적용할려고 합니다
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
5년 전
숫자는 동일하므로 "bgBtn"를 "bg-color-"로 치환
</p>
<p><script>
$(function(){
$('.bgColor-btn').click(function(){
$('body')
.removeClass()
.addClass($(this).data('id').replace('bgBtn', 'bg-color-'));
});
})
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
광깔
5년 전
감사합니다 ! 배우고 갑니다!
댓글을 작성하려면 로그인이 필요합니다.
5년 전
</p>
<pre>
<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="<a href="https://code.jquery.com/jquery-3.5.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.5.0.min.js"></script></a>
<script>
$('.bgColor-btn').click(function(){
var dataId = $(this).data("id");
$('body').removeClass();
$('body').addClass( dataId );
});
</script>
</body></pre>
<p>if문을 안써도 될것같네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
광깔
5년 전
감사합니다, if문을 안 써도 되는 부분이었네요 ㅠㅠ 배우고 갑니다!!
댓글을 작성하려면 로그인이 필요합니다.
5년 전
</p>
<p>switch (dataId) {</p>
<p> default: //기본</p>
<p> bodyNoclass;</p>
<p> case 'bgBtn1': // dataId 값이 bgBtn1 일때 실행</p>
<p> $('body').addClass('bg-color-1');</p>
<p> break; // 브레이크를 사용하여 switch 빠져나옴</p>
<p> case 'bgBtn2': // dataId 값이 bgBtn2 일때 실행</p>
<p> $('body').addClass('bg-color-2');</p>
<p> break;</p>
<p> case 'bgBtn3':</p>
<p> $('body').addClass('bg-color-3');</p>
<p> break;</p>
<p> case 'bgBtn4':</p>
<p> $('body').addClass('bg-color-4');</p>
<p> break;</p>
<p>}</p>
<p>
if문이 보기 불편하셔서 그런거라면 switch 문이라는 문법이 있습니다.
참고해보시고 도움이 되셨으면 좋겠습니다. ㅎ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
광깔
5년 전
감사합니다 !
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인