event do kilku elementów o tej samej klasie

Question

Mam menu, i niewidoczną zawartość diva z kontentem.

Po kliknięciu opcji w menu, chcę dodać klasę do tej opcji i pokazać kontent.

Pierwsza sprawa jak dodać event do tych wszystkich elementów z menu na raz?

<div class="content">
  <div class="menu">
    <div class="opcja">Opcja1</div>
    <div class="opcja">Opcja2</div>
    <div class="opcja">Opcja3</div>
  </div>
  <div class="opcja1_content hidden">Zawartość opcji 1</div>
  <div class="opcja2_content hidden">Zawartość opcji 2</div>
  <div class="opcja3_content hidden">Zawartość opcji 3</div>
</div>

 

.menu {
  display: flex;
}

.opcja {
  background-color: blue;
  color: white;
  margin: 5px;
  padding: 5px 15px;
}

.active {
  background-color: red;
}

.hidden {
  display: none;
}

 

document.querySelector('.opcja').addEventListener('click', (e) => {
 document.querySelector('.opcja').addClass('active');
});

Powyższy zapis dodaje mi event na pierwszy element.

Druga sprawa jak powiązać kontent z konkretną opcją w menu? (w sensie, że jak kliknę pierwszą opcję to pokaże zawartość do pierwszej opcji)

Comments

Zamiast querySelector, wystarczy użyć querySelectorAll.

Answer 1

Jest coś takiego jak event delegation.

Tutaj masz przykład: https://codepen.io/Danrox/pen/eLeNbm

Comments

To jest dobre, ale dodatkowo jak kliknę na 'Opcja 2', to muszę ukryć kontent pozostałych opcji.

 

Myślałem, że może tak zadziała, ale nie :( -https://codepen.io/anon/pen/XPzdXw

---

wszystko działa. Dobry kod napisałeś, ale nie wiem czy używasz jquery(jezeli tak, to po co) czy co, ale zamiast removeClass powinno być classList.remove i tak samo dla add 

const options = document.querySelectorAll('.optionH');
const container = document.querySelector('.container');
container.addEventListener('click', e => {
  const el = e.target;
  if(el.className === 'option') {
    options.forEach((element)=>{
      element.classList.add('hidden');
    });
document.querySelector(`.${el.className}${el.dataset.number}`).classList.remove('hidden');
  }
});

 

---

Nie brnął bym w tą strukturę html. Zrobiłbym listę z kotwicami do id. Pobranie odnośnika wskaże docelowy element, który odkrywamy a pobranie wszystkich równierz pozwoli ukryć wszystkie treści.

Answer 2

const twojeElementy = document.querySelectorAll('.klasaElemetow');

twojeElementy.forEach((element)=>{
element.addEventListener('click', callback);
})

 

Answer 3

Zamiast querySelector użyj querySelectorAll