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:

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

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

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

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

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:

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

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:

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

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