JavaScriptda ko'p elementlarni ko'rsatish tugmalari

Endi faraz qilaylik, bizda ko'p abzatslar bor va har birining o'zining yashirish tugmasi bor:

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

Keling, tugmacha bosilganda unga mos keladigan abzats yashirilsin yoki ko'rsatilsin.

Buning uchun biz qandaydir tarzda tugmalarni abzatslarimiz bilan bog'lashimiz kerak. Buning uchun bir nechta usul mavjud.

Birinchi usul

Tugmalar va abzatslarni quyidagicha bog'laymiz:

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

Endi har qanday tugmachani bosganimizda, biz uning data-elem atributi mazmunini o'qiymiz va shu id ga ega bo'lgan abzatsni qidiramiz. Aynan shuni toggle qilamiz. Tasvirlangan amalga oshiramiz:

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

Mening yechimimni o'rganing, keyin mustaqil ravishda, mening kodimga qaramay, bu masalani yeching.

Ikkinchi usul

Id va data-atributlarni joylashtirish unchalik qulay emas. Keling, bog'lanish tartib raqami bo'yicha bo'ladigan qilaylik: birinchi tugma birinchi abzatsni yashiradi, ikkinchi tugma - ikkinchini va hokazo.

Tasvirlangan amalga oshiramiz:

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

Mening yechimimni o'rganing, keyin mustaqil ravishda, mening kodimga qaramay, bu masalani yeching.

Uchinchi usul

Ko'rinib turibdiki, tugma bilan bog'langan abzats, uning chap qo'shnisi hisoblanadi. Buni bog'lanish uchun ishlatish mumkin:

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

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

Mening yechimimni o'rganing, keyin mustaqil ravishda, mening kodimga qaramay, bu masalani yeching.