Vipengee Vingi Vilivyo na Vifungo vya Kuonyesha kwenye JavaScript

Hebu sasa tuchukulie tuna aya nyingi na kila moja ikiwa na kifungo chake cha kuficha:

<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

Tutafanya ili, wakati kifungo kibonyezwa, aya inayohusika nayo ifichike au ionekane.

Ili kufanya hivyo, kwa namna fulani tunahitaji kuunganisha vifungo na aya zetu. Kuna njia kadhaa za kufanya hivyo.

Njia ya Kwanza

Tutaunganisha vifungo na aya kama ifuatavyo:

<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

Sasa, kwa kubonyeza kifungo chochote, tutasoma yaliyomo kwenye kipengele cha data-elem chake na kutafuta aya lenye kitambulisho (id) hicho. Hilo ndilo tutakalobadilisha hali yake (toggle). Tutatekeleza yaliyoelezewa:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		let elem = document.querySelector('#' + this.dataset.elem);
		elem.classList.toggle('hidden');
	});
}

Jifunze ufumbuzi wangu, kisha wewe mwenyewe, bila kuangalia code yangu, tatua tatizo hili.

Njia ya Pili

Kuweka id na vipengele vya data si rahisi sana. Wacha tufanye ili uhusiano uwe kwa nambari ya mlolongo: kifungo cha kwanza kifiche aya ya kwanza, kifungo cha pili - aya ya pili na kadhalika.

Tutatekeleza yaliyoelezewa:

let buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', function() {
		elems[i].classList.toggle('hidden');
	});
}

Jifunze ufumbuzi wangu, kisha wewe mwenyewe, bila kuangalia code yangu, tatua tatizo hili.

Njia ya Tatu

Kama inavyoweza kuonekana, aya inayohusika na kifungo, ni jirani yake upande wa kushoto. Hii inaweza kutumika kama uhusiano:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		this.previousElementSibling.classList.toggle('hidden');
	});
}

Jifunze ufumbuzi wangu, kisha wewe mwenyewe, bila kuangalia code yangu, tatua tatizo hili.