Делегирование нужного блока

Question

У меня есть пару полностью одинаковых контейнера, в них кнопки с однаковым функционалом, при нажатии на которые до двух родительских элементов добавляется класс active и происходит поворот контейнера. Я бы не хотел каждой кнопке писать отдельную функцию добавления класса и повторять код. Как можно было бы определить на какую кнопку нажали и чтобы в самом этом контейнере происходила функция добавления класса. Я знаю что это возможно с помощью делегирования, но не знаю как это реализовать, такие контейнеры могут в дальнейшем добавляться.

<div class="history-conteiner">
<div class="history-cart" >
    <div class="history-cart-before"> //Сюда добавляется класс
       <div class="histori-cart_btn" onclick="toggleHistoriCart()" >//Кнопка добавление класса
       </div>
    </div>
    <div class="history-cart_back"> // сюда добавляется класс
       <div class="histori-cart_return" onclick="historiReturn()">  //Кнопка удаление класса          
       </div>
    </div> 
 </div>
 <div class="history-cart" >
   <div class="history-cart-before"> //Сюда добавляется класс
       <div class="histori-cart_btn" onclick="toggleHistoriCart()" >Кнопка добавление класса
       </div>
   </div>
   <div class="history-cart_back"> //И сюда добавляется класс
       <div class="histori-cart_return" onclick="historiReturn()">  //Кнопка удаление класса          
       </div>
    </div> 
</div>

Answer 1

addEventListener(`click`, e => {
  let $target = e.target.closest(`.histori-cart_return`);
  if ($target) {
    $target.closest(`.history-cart_back`).classList.toggle(`red`);
    return;
  }

  $target = e.target.closest(`.histori-cart_btn`);
  if ($target) {
    $target.closest(`.history-cart-before`).classList.toggle(`green`);
    return;
  }

});

.histori-cart_return,
.histori-cart_btn {
  background-color: gray;
  color: white;
  cursor: pointer;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

<div class="history-conteiner">
  <div class="history-cart">
    <div class="history-cart-before"> //Сюда добавляется класс
      <div class="histori-cart_btn">// Кнопка добавление класса
      </div>
    </div>
    <div class="history-cart_back"> // сюда добавляется класс
      <div class="histori-cart_return"> //Кнопка удаление класса
      </div>
    </div>
  </div>
  <div class="history-cart">
    <div class="history-cart-before"> //Сюда добавляется класс
      <div class="histori-cart_btn">Кнопка добавление класса
      </div>
    </div>
    <div class="history-cart_back"> //И сюда добавляется класс
      <div class="histori-cart_return"> //Кнопка удаление класса
      </div>
    </div>
  </div>

БЛОГ НА HUSL

Делегирование нужного блока

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