Flera element med visningsknappar i JavaScript

Låt oss nu säga att vi har många stycken och varje stycke har sin egen knapp för att dölja:

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

Låt oss göra så att när man klickar på en knapp döljs eller visas det motsvarande stycket.

För att göra detta behöver vi på något sätt koppla knapparna till våra stycken. Det finns flera sätt att göra detta på.

Första metoden

Låt oss koppla knappar och stycken på följande sätt:

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

Nu kommer vi, när vi klickar på en knapp, att läsa innehållet i dess data-elem-attribut och söka efter ett stycke med det id:t. Det är det vi kommer att växla. Låt oss implementera det som beskrivs:

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

Studera min lösning, och lös sedan denna uppgift på egen hand, utan att titta på min kod.

Andra metoden

Att sätta id:n och data-attribut är inte särskilt bekvämt. Låt oss göra så att kopplingen sker genom ordningsföljd: låt den första knappen dölja det första stycket, den andra knappen - det andra och så vidare.

Låt oss implementera det som beskrivs:

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

Studera min lösning, och lös sedan denna uppgift på egen hand, utan att titta på min kod.

Tredje metoden

Som kan ses är stycket som är kopplat till knappen dess vänstra granne. Detta kan användas för att skapa kopplingen:

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

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

Studera min lösning, och lös sedan denna uppgift på egen hand, utan att titta på min kod.