Multe elemente cu butoane de afișare în JavaScript

Să presupunem acum că avem mai multe paragrafe și fiecare are propriul buton pentru ascundere:

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

Să facem astfel încât la click pe buton să se ascundă sau să se afișeze paragraful corespunzător acestuia.

Pentru aceasta, într-un fel sau altul, trebuie să legăm butoanele de paragrafele noastre. Există mai multe modalități de a face acest lucru.

Prima metodă

Să legăm butoanele și paragrafele în felul următor:

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

Acum la click pe orice buton vom citi conținutul atributului său data-elem și vom căuta paragraful cu acel id. Pe acesta îl vom comuta (toggle). Să implementăm cele descrise:

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

Studiați soluția mea, apoi independent, fără a vă uita la codul meu, rezolvați această problemă.

A doua metodă

Nu este foarte convenabil să atribuiți id-uri și atribute data. Să facem astfel încât legătura să fie prin numărul de ordine: să presupunem că primul buton ascunde primul paragraf, al doilea buton - al doilea și așa mai departe.

Să implementăm cele descrise:

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

Studiați soluția mea, apoi independent, fără a vă uita la codul meu, rezolvați această problemă.

A treia metodă

După cum se poate observa, paragraful asociat cu butonul, este vecinul său din stânga. Putem folosi acest lucru ca o legătură:

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

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

Studiați soluția mea, apoi independent, fără a vă uita la codul meu, rezolvați această problemă.