Shumë elemente me butona shfaqje në JavaScript

Le të supozojmë tani që kemi shumë paragrafë dhe secili ka butonin e vet për fshehje:

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

Le të bëjmë që me klik në buton të fshihet ose të shfaqet paragrafi përkatës.

Për këtë, na duhet në një farë mënyre të lidhim butonat me paragrafët tanë. Ekzistojnë disa mënyra për ta bërë këtë.

Mënyra e parë

Le t'i lidhim butonat dhe paragrafët si më poshtë:

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

Tani, me klik në cilindo buton do të marrim përmbajtjen e atributit të tij data-elem dhe do të kërkojmë paragrafin me atë id. Atë do ta "toggle-ojmë". Le të realizojmë sa më sipër:

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

Studioni zgjidhjen time, dhe pastaj në mënyrë të pavarur, duke mos parë kodin tim, zgjidheni këtë detyrë.

Mënyra e dytë

Nuk është shumë e përshtatshme të vendosësh id dhe data-atribute. Le të bëjmë që lidhja të bëhet sipas numrit rendor: le të themi që butoni i parë fsheh paragrafin e parë, butoni i dytë - të dytin, e kështu me radhë.

Le të realizojmë sa më sipër:

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

Studioni zgjidhjen time, dhe pastaj në mënyrë të pavur, duke mos parë kodin tim, zgjidheni këtë detyrë.

Mënyra e tretë

Siç mund të shihet, paragrafi i lidhur me butonin është fqinji i tij majtas. Kjo mund të përdoret për të krijuar lidhjen:

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

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

Studioni zgjidhjen time, dhe pastaj në mënyrë të pavarur, duke mos parë kodin tim, zgjidheni këtë detyrë.