Више елемената са дугмадима за приказ на 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');
	});
}

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