De nombreux éléments avec des boutons d'affichage en JavaScript

Supposons maintenant que nous ayons de nombreux paragraphes et que chacun ait son propre bouton pour masquer :

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

Faisons en sorte qu'un clic sur le bouton masque ou affiche le paragraphe correspondant.

Pour cela, nous devons d'une manière ou d'une autre relier les boutons à nos paragraphes. Il existe plusieurs méthodes pour cela.

Première méthode

Relions les boutons et les paragraphes de la manière suivante :

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

Maintenant, lors d'un clic sur n'importe quel bouton, nous lirons le contenu de son attribut data-elem et chercherons le paragraphe avec cet id. C'est celui-là que nous basculerons. Implémentons ce qui est décrit :

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

Étudiez ma solution, puis résolvez ce problème par vous-même, sans regarder mon code.

Deuxième méthode

Il n'est pas très pratique d'attribuer des id et des data-attributs. Faisons en sorte que le lien soit établi par l'ordre : que le premier bouton masque le premier paragraphe, le deuxième bouton - le deuxième, et ainsi de suite.

Implémentons ce qui est décrit :

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

Étudiez ma solution, puis résolvez ce problème par vous-même, sans regarder mon code.

Troisième méthode

Comme on peut le voir, le paragraphe associé au bouton est son voisin de gauche. On peut utiliser cela comme un lien :

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

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

Étudiez ma solution, puis résolvez ce problème par vous-même, sans regarder mon code.