JavaScript-da Faollashtirish Uslublarini Almashish

Oldingi darsda biz ustunlarni ularga bosganda faollashtirishni o‘rgandik. Keling, endi ranglarning almashinishi amalga oshiriladigan qilaylik: birinchi ustun qizil rangga, ikkinchisi - yashil rangga, uchinchisi - yana qizil va hokazo bo‘yaladi.

Bu masalani yechish uchun bizga allaqachon ikkita CSS klass kerak bo‘ladi:

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

Keling, tavsiflangan almashinishni amalga oshiramiz:

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

Mening kodimni tahlil qiling, so‘ngra mustaqil ravishda ushbu masalaning yechimini takrorlang.

Massivdan Ko‘p Ranglarni Almashish

Endi ikkita emas, balki ixtiyoriy miqdordagi ranglarni almashtirmoqchi bo‘lganimiz faraz qilaylik. Buning uchun CSS klasslar massivini saqlaymiz:

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

Keling, klasslarimizning ranglarini yozamiz:

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

Endi esa almashinishni amalga oshiramiz:

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

Mening keltirgan kodim qanday ishlashini tushuntiring.