Wiele elementów z przyciskami pokazu w JavaScript

Załóżmy teraz, że mamy wiele akapitów i każdy ma swój przycisk do ukrywania:

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

Sprawmy, aby po kliknięciu przycisku ukrywał się lub pokazywał odpowiadający mu akapit.

Aby to zrobić, musimy w jakiś sposób powiązać przyciski z naszymi akapitami. Istnieje kilka sposobów, aby to osiągnąć.

Pierwszy sposób

Powiążmy przyciski i akapity w następujący sposób:

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

Teraz po kliknięciu dowolnego przycisku będziemy odczytywać zawartość jego atrybutu data-elem i szukać akapitu z takim id. To właśnie go będziemy przełączać (toggle). Zrealizujmy opisane:

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

Przeanalizuj moje rozwiązanie, a następnie samodzielnie, nie podglądając mojego kodu, rozwiąż to zadanie.

Drugi sposób

Umieszczanie id i atrybutów data nie jest zbyt wygodne. Zróbmy tak, aby powiązanie odbywało się według numeru porządkowego: niech pierwszy przycisk ukrywa pierwszy akapit, drugi przycisk - drugi i tak dalej.

Zrealizujmy opisane:

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

Przeanalizuj moje rozwiązanie, a następnie samodzielnie, nie podglądając mojego kodu, rozwiąż to zadanie.

Trzeci sposób

Jak można zauważyć, akapit powiązany z przyciskiem jest jego lewym sąsiadem. Można to wykorzystać jako powiązanie:

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

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

Przeanalizuj moje rozwiązanie, a następnie samodzielnie, nie podglądając mojego kodu, rozwiąż to zadanie.