Penggantian Gaya Pengaktifan dalam JavaScript

Dalam pelajaran sebelumnya, kita belajar bagaimana untuk mengaktifkan sel dengan mengklik padanya. Sekarang mari kita jadikan warna berganti-ganti: biar sel pertama diwarnakan dengan merah, kedua - dengan hijau, ketiga - sekali lagi dengan merah dan seterusnya.

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

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

Mari kita laksanakan penggantian yang diterangkan:

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

Analisa kod saya, dan kemudian secara berdikari ulangi penyelesaian untuk tugas ini.

Penggantian Banyak Warna daripada Array

Sekarang katakan kita mahu menggantikan bukan dua warna, tetapi sebarang jumlah. Untuk 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 laksanakan penggantian:

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

Terangkan bagaimana kod yang saya berikan berfungsi.