Luân phiên các kiểu kích hoạt trên JavaScript

Trong bài học trước, chúng ta đã học cách kích hoạt các ô khi nhấp vào chúng. Bây giờ hãy làm sao để màu sắc luân phiên: ô đầu tiên tô màu đỏ, ô thứ hai - màu xanh lá cây, ô thứ ba - lại màu đỏ và cứ tiếp tục như vậy.

Để giải quyết tác vụ này, chúng ta sẽ cần hai lớp CSS:

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

Hãy triển khai sự luân phiên đã mô tả:

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);
	});
}

Hãy phân tích mã của tôi, sau đó tự mình lặp lại giải pháp cho tác vụ này.

Luân phiên nhiều màu từ mảng

Bây giờ giả sử chúng ta muốn luân phiên không phải hai màu, mà là một số lượng bất kỳ. Để làm điều này, hãy lưu trữ một mảng các lớp CSS:

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

Hãy viết màu sắc cho các lớp của chúng ta:

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

Và bây giờ hãy triển khai sự luân phiên:

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;
		}
	});
}

Hãy giải thích cách hoạt động của đoạn mã tôi đưa ra.