JavaScript-de köp elementleri görkezmek düwmeleri

Indi diýelim biziň her biriniň öz gizlemek düwmesi bolan köp abzaslarymyz bar:

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

Düwmä basylanda, şoňa degişli abzas ya gizlenmeli ýada görkezilmeli bolşy ýaly edeliň.

Bun üçin biz nädipdir düwmeleri abzaslarymyz bilen baglamaly. Bun üçin birnäçe usul bar.

Birinji usul

Düwmeler we abzaslar aşakdaky ýaly baglalyň:

<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>

Indi haýsy bir düwmä basylsa-da, biz onuň data-elem atributynyň mazmunyny okarys we şoňa meňzeş id-li abzazy gözleýäris. Ony toggle ederis. Beýan edileni amala aşyralyň:

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

Men iş ýörüşimi öwreniň, soňra öz başyňyza, meniň koduma seretmezden, bu meseleni çöziň.

Ikinji usul

Id we data-atributlary goýmak ýeterlik derejede amatly däl. Geliň baglanyşyk tertip belgisi boýunça bolşy ýaly edeliň: birinji düwme birinji abzazy gizlesin, ikinji düwme ikinji abzazy gizlesin we ş.m.

Beýan edileni amala aşyralyň:

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

Men iş ýörüşimi öwreniň, soňra öz başyňyza, meniň koduma seretmezden, bu meseleni çöziň.

Üçünji usul

Görşüňiz ýaly, düwme bilen baglanyşykly abzas, onuň çep tarapyndaky goňşysydyr. Muny baglanyşyk hökmünde ulanmak bolýar:

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

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

Men iş ýörüşimi öwreniň, soňra öz başyňyza, meniň koduma seretmezden, bu meseleni çöziň.