Многу елементи со копчиња за прикажување во JavaScript

Сега нека имаме многу параграфи и секој од нив има свое копче за скривање:

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

Да направиме така што при клик на копчето да се скрие или да се прикаже соодветниот параграф.

За ова на некој начин треба да ги поврземе копчињата со нашите параграфи. За ова постојат неколку начини.

Прв начин

Да ги поврземе копчињата и параграфите на следниов начин:

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

Сега при клик на кое било копче ќе го прочитаме содржината на неговиот атрибут data-elem и ќе го бараме параграфот со тоа id. Тој ќе го вклучуваме/исклучуваме (toggle). Да го имплементираме опишаното:

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

Проучете го моето решение, а потоа самостојно, без да гледате во мојот код, решете ја оваа задача.

Втор начин

Поставувањето id и data-атрибути не е многу погодно. Ајде да направиме така што врската да биде по редниот број: нека првото копче го скрива првиот параграф, второто копче - вториот и така натаму.

Да го имплементираме опишаното:

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

Проучете го моето решение, а потоа самостојно, без да гледате во мојот код, решете ја оваа задача.

Трет начин

Како што може да се види, параграфот поврзан со копчето, е негов лев сосед. Ова може да се искористи како врска:

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

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

Проучете го моето решение, а потоа самостојно, без да гледате во мојот код, решете ја оваа задача.