Добавить класс по клику двум дочерним элементам JavaScript

Question

Всем доброго времени суток! В JavaScript еще новичок и не совсем все получается корректно.

Дано: родительский элемент (Div), выполняющий функцию своеобразной кнопки-переключателя, в нем два элемента: svg иконка и текст. Так вот, при клике на одну из кнопок, должен добавляться класс active к двум эти элементам, а у остальных класс active соответсвенно убирается.

<div class="spec-button">
  <svg class="icon active"></svg>
  <span class="spec-text active">Характеристики<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Вопросы и ответы<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Отзывы<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Гарантия<span>
</div>

.spec-button {
    padding: 2rem;
    border-bottom: 1px solid #F4F4F4;
    font-size: 1.8rem;
    display: flex;
    cursor: pointer;
    &:last-child {
      border: 0;
    }

    .icon.active{
      stroke: #FA3030;
      opacity: 1;
    }

    .icon {
      opacity: 0.2;
      stroke: #000000;
    }
}

.spec-text.active {
  opacity: 1;
}

.spec-text {
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: #000000;
  opacity: 0.2;
  margin-left: 1.6rem;
}
}

Answer 1

// Взять все кнопки с классом .spec-button
const buttons = document.querySelectorAll('.spec-button')

// Перебрать все найденные кнопки
for (let button of buttons) {
  // Каждый из кнопок добавить событие click и функцию
  button.addEventListener('click', () => {
    // Берет первый активный элемент в кнопке (элемент с классом .active)
    const activeElement = button.querySelector('.active')
    // Если этот активный элемент не существует
    if (!activeElement) {
      // Ищет во всем документе ближайшую кнопку .spec-button, там ищет .icon с классом .active и удаляет .active
      document.querySelector('.spec-button>.icon.active').classList.remove('active')
      // Ищет во всем документе ближайшую кнопку .spec-button, там ищет .spec-text с классом .active и удаляет .active
      document.querySelector('.spec-button>.spec-text.active').classList.remove('active')
      // Добавляет в текущей кнопке класс .active на элемент с классом .icon
      button.querySelector('.icon').classList.add('active')
      // Добавляет в текущей кнопке класс .active на элемент с классом .spec-text
      button.querySelector('.spec-text').classList.add('active')
    }
  })
}

.active {
  background: rgba(123, 3, 223, .33);
}

<div class="spec-button">
  <svg class="icon active"></svg>
  <span class="spec-text active">Характеристики<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Вопросы и ответы<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Отзывы<span>
</div>
<div class="spec-button">
  <svg class="icon"></svg>
  <span class="spec-text">Гарантия<span>
</div>

БЛОГ НА HUSL

Добавить класс по клику двум дочерним элементам JavaScript

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