JavaScript에서 활성화 스타일 교체하기

이전 강의에서는 셀을 클릭하여 활성화하는 방법을 배웠습니다. 이제 색상을 교체해 보겠습니다: 첫 번째 셀은 빨간색, 두 번째 셀은 초록색, 세 번째 셀은 다시 빨간색으로 칠해지도록 합니다.

이 문제를 해결하려면 두 개의 CSS 클래스가 필요합니다:

.color1 {
	background: red;
}
.color2 {
	background: green;
}

설명한 교체를 구현해 보겠습니다:

let tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
	td.addEventListener('click', function() {
		if (color == 'color1') {
			color = 'color2'
		} else {
			color = 'color1'
		}
		
		this.classList.add(color);
	});
}

제 코드를 분석한 다음, 이 문제를 직접 다시 풀어보세요.

배열에서 여러 색상 교체하기

이제 두 가지 색상이 아닌, 임의의 수의 색상을 교체하고 싶다고 가정해 보겠습니다. 이를 위해 CSS 클래스 배열을 저장하겠습니다:

let colors = ['color1', 'color2', 'color3'];

클래스의 색상을 작성해 보겠습니다:

.color1 {
	background: red;
}
.color2 {
	background: green;
}
.color3 {
	background: yellow;
}

이제 교체를 구현해 보겠습니다:

let tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
	td.addEventListener('click', function() {
		this.classList.add(colors[i]);
		
		i++;
		if (i == colors.length) {
			i = 0;
		}
	});
}

제가 제시한 코드가 어떻게 작동하는지 설명해 보세요.