색이 바뀌는 상자 실습 내용
-
jQuery와 jQuery UI 라이브러리를 활용해서 코드를 작성했다.
-
jQuery UI의 switchClass 메서드를 사용하여 색상을 순환하게 만드는 코드이다.
-
단순한 움직임 이지만 여러모로 힘들었던 과제이다.
결과
HTML
<html>
<head>
<title>jQuery 실습2</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js" integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=" crossorigin="anonymous"></script>
<!-- TODO1: jQuery CDN 불러오기 -->
<style>
div {
width: 100;
height: 100;
}
div:hover {
cursor: pointer;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
</style>
<script>
console.log('red')
let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
// TODO2: changeColor 함수 내부 작성
function changeColor() {
if($('div').hasClass('red')){
$('div').switchClass('red','orange')
}else if($('div').hasClass('orange')){
$('div').switchClass('orange','yellow')
}else if($('div').hasClass('yellow')){
$('div').switchClass('yellow','green')
}else if($('div').hasClass('green')){
$('div').switchClass('green','blue')
}else if($('div').hasClass('blue')){
$('div').switchClass('blue','purple')
}else if($('div').hasClass('purple')){
$('div').switchClass('purple','red')
}
}
</script>
</head>
<body>
<div class="red" onclick="changeColor();"></div>
</body>
</html>jQuery
-
"jQuery CDN"이 정확하지 않아 매우 힘들었던 실습이었다.
-
처음 클릭이 되지 않는 문제가 생겼는데, 클레스의 요소를 확인하지 않고 변경하는 과정에서 문제가 생겼다.
그런 문제를 해결하고자. switchClass 사용 전 hasClass로 현재 색상 클래스를 확인하게 만들었다. -
상이 바뀌지 않는 문제는 col 인덱스에 의해 순환하는 방식으로 전환하려 했는데 실패했다.
문제ㅡㄹ 해결하기위해 조언을 얻었는데, 먼저 색상 클래스가 현재 적용되어 있는지를 hasClass로 확인한 후, switchClass를 사용해 다음 색상으로 전환하는 방식으로 해결했다.
Name : 최윤석(YoonSuk Choi)