JavaScriptда кўп элементларни кўрсатиш тугмалари

Энди бизда кўп абзацлар бор ва ҳар бирининг беркитиш учун ўз тугмаси бор деб фараз қилайлик:

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

Тугма босилганда унинг мос абзаци беркитилса ёки кўрсатилса қилайлик.

Буни амалга ошириш учун биз қандайдир бир усул билан тугмаларни абзацларимиз билан боглашимиз керак. Буни амалга ошириш учун bir nechta usul mavjud.

Биринчи усул

Тугмалар ва абзацларни қуйидагича боглаймиз:

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

Энди ҳар қандай тугма босилганда биз унинг data-elem атрибутини ўқиамиз ва шундай id га эга бўлган абзацни топамиз. Уни toggle қиламиз. Тавсифланганни амалга оширамиз:

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

Менинг ечимимни ўрганинг, сўнгра мустақил равишда, менинг кодга қарамай, бу масалани ечинг.

Иккинчи усул

Id ва data-атрибутларни жойлаштириш жуда қулай эмас. Келинг, богланиш tartib raqami бўйича бўлсин: биринчи тугма биринчи абзацни берктирсин, иккинчи тугма - иккинчини ва ҳоказо.

Тавсифланганни амалга оширамиз:

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

Менинг ечимимни ўрганинг, сўнгра мустақил равишда, менинг кодга қарамай, бу масалани ечинг.

Учинчи усул

Кўриниб турибдики, тугма билан богланган абзац, унинг чап томонидаги қўшнисидир. Буни богланиш учун ислатса бўлади:

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

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

Менинг ечимимни ўрганинг, сўнгра мустақил равишда, менинг кодга қарамай, бу масалани ечинг.