Добавить и убрать класс к блоку по нажатию

Question

У меня есть контейнера и в каждом из них есть много блоков. Мне надо по нажатию на div к примеру по нажатию на block open0 чтобы ко всем блокам во всех контенерах с классом block open0 добавился ещё один класс и по нажатию убрался. Помогите пожалуйста

<div class="container_first">
    <div class="block open0">

   </div>
   <div class="block open1">

   </div>
   <div class="block open2">

   </div>
</div>

<div class="container_second">
    <div class="block open0">

   </div>
   <div class="block open1">

   </div>
   <div class="block open2">

   </div>
</div>

<div class="container_third">
     <div class="block open0">

   </div>
   <div class="block open1">

   </div>
   <div class="block open2">

   </div>
</div>

Answer 1

Немножко изврат, но все-же )

document.querySelectorAll('div.block').forEach(d => d.addEventListener('click', e => {
  const selector = [...e.target.classList].map(e => `.${e}`).join('')
  document.querySelectorAll(selector).forEach(e => e.classList.toggle('active'))
}))

.active {
  background-color: red;
}

.block {
  height: 15px;
  width: 15px;
  border: 1px solid black;
}

<div class="container_first">
  <div class="block open0">
    0
  </div>
  <div class="block open1">
    1
  </div>
  <div class="block open2">
    2
  </div>
</div>

<div class="container_second">
  <div class="block open0">
    0
  </div>
  <div class="block open1">
    1
  </div>
  <div class="block open2">
    2
  </div>
</div>

<div class="container_third">
  <div class="block open0">
    0
  </div>
  <div class="block open1">
    1
  </div>
  <div class="block open2">
    2
  </div>
</div>

БЛОГ НА HUSL

Добавить и убрать класс к блоку по нажатию

Ответы (1 шт):