ජාවාස්ක්‍රිප්ට් හි සක්‍රිය කිරීමේ විලාසිතා විකල්පය

පෙර පාඩමේදී, අපි ඒවායේ ක්ලික් කිරීමෙන් කොටු සක්‍රිය කිරීමට ඉගෙන ගත්තෙමු. අපි දැන් වර්ණ විකල්පය සිදුවන පරිදි කරමු: පළමු කොටුව රතු පැහැයට, දෙවැන්න - කොළ පැහැයට, තෙවැන්න - නැවත රතු පැහැයට සහ එලෙසම වර්ණ කරනු ලැබේ.

මෙම ගැටලුව විසඳීම සඳහා අපට දැන් CSS වර්ග දෙකක් අවශ්‍ය වේ:

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

විස්තර කළ විකල්පය ක්‍රියාත්මක කරමු:

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

මගේ කේතය විශ්ලේෂණය කරන්න, ඉන්පසු ස්වාධීනව මෙම ගැටලුවේ විසඳුම නැවත කරන්න.

අරාවෙන් බහු වර්ණ විකල්පය කිරීම

දැන් අපට වර්ණ දෙකක් නොව, අත්තනෝමතික ප්‍රමාණයක් විකල්පය කිරීමට අවශ්‍ය යැයි සිතමු. මේ සඳහා CSS වර්ග අරාවක් ගබඩා කරමු:

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

අපගේ වර්ගවල වර්ණ ලියමු:

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

දැන් විකල්පය ක්‍රියාත්මක කරමු:

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

මා විසින් ඉදිරිපත් කරන ලද කේතය ක්‍රියා කරන ආකාරය පැහැදිලි කරන්න.