Pergantian Gaya Aktivasi pada JavaScript

Dalam pelajaran sebelumnya, kita belajar mengaktifkan sel dengan mengkliknya. Sekarang mari kita buat agar terjadi pergantian warna: misalkan sel pertama diwarnai merah, sel kedua - hijau, sel ketiga - merah lagi, dan seterusnya.

Untuk menyelesaikan tugas ini, kita akan membutuhkan dua kelas CSS:

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

Mari kita implementasikan pergantian yang dijelaskan:

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

Pelajari kode saya, lalu ulangi secara mandiri penyelesaian tugas ini.

Pergantian Banyak Warna dari Array

Sekarang misalkan kita ingin mengganti bukan dua warna, tapi sejumlah warna tertentu. Untuk melakukan ini, mari kita simpan array kelas CSS:

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

Mari tulis warna untuk kelas kita:

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

Dan sekarang mari implementasikan pergantian:

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

Jelaskan bagaimana kode yang saya berikan bekerja.