JavaScript-də Aktivləşdirmə Üsullarının Növbələşdirilməsi

Əvvəlki dərsdə biz xanaları onların üzərini klikləməklə aktivləşdirməyi öyrəndik. Gəlin indi elə edək ki, rənglər növbələşsin: birinci xana qırmızı, ikinci - yaşıl, üçüncü - yenə qırmızı rəngdə olsun və s.

Bu məsələni həll etmək üçün artıq iki CSS sinfinə ehtiyacımız olacaq:

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

Gəlin təsvir olunan növbələşməni həyata keçirək:

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

Mənim kodumu təhlil edin və sonra bu məsələni özünüz təkrar həll edin.

Massivdən Bir çox Rəngin Növbələşdirilməsi

Tutaq ki, indi iki rəngi deyil, istənilən sayda rəngi növbələşdirmək istəyirik. Bunun üçün CSS sinifləri massivini saxlayaq:

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

Gəlin siniflərimizin rənglərini yazaq:

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

İndi isə növbələşməni həyata keçirək:

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

Mənim təqdim etdiyim kodun necə işlədiyini izah edin.