Molti elementi con pulsanti di visualizzazione in JavaScript

Supponiamo ora di avere molti paragrafi e ognuno con il proprio pulsante per nasconderlo:

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

Facciamo in modo che cliccando sul pulsante venga nascosto o mostrato il paragrafo corrispondente.

Per fare questo, in qualche modo dobbiamo collegare i pulsanti ai nostri paragrafi. Esistono diversi modi per farlo.

Primo metodo

Colleghiamo i pulsanti e i paragrafi nel modo seguente:

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

Ora, cliccando su qualsiasi pulsante, leggeremo il contenuto del suo attributo data-elem e cercheremo il paragrafo con quell'id. È quello che attiveremo/disattiveremo (toggle). Implementiamo quanto descritto:

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

Studiate la mia soluzione, poi autonomamente, senza guardare il mio codice, risolvete questo problema.

Secondo metodo

Assegnare id e attributi data non è molto pratico. Facciamo in modo che la connessione sia basata sull'ordine sequenziale: lasciamo che il primo pulsante nasconda il primo paragrafo, il secondo pulsante - il secondo e così via.

Implementiamo quanto descritto:

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

Studiate la mia soluzione, poi autonomamente, senza guardare il mio codice, risolvete questo problema.

Terzo metodo

Come si può vedere, il paragrafo collegato al pulsante è il suo vicino sinistro. Possiamo usare questo come connessione:

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

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

Studiate la mia soluzione, poi autonomamente, senza guardare il mio codice, risolvete questo problema.