@bazliiii

Как добавлять класс элементу рядом с активной radio кнопкой?

Выбрали item, и нужно, чтобы соседнему с активной radio кнопкой элементу .faq__question--top добавлялся класс active.

<div class="faq__items">
  <div class="faq__item">
    <label class="faq__question" for="faq_1">
      <div class="faq__question--top">
        <label class="faq__title" for="faq_1">text
        </label>
        <img src="./arrow.svg" alt="arrow" class="faq__arrow">
      </div>
      <input class="faq__input" type="radio" name="faq" id="faq_1">
      <div class="faq__content">
        <p class="faq__text">
          text
        </p>
      </div>
    </label>
  </div>
  <div class="faq__item">
    <label class="faq__question" for="faq_2">
      <div class="faq__question--top">
        <label class="faq__title" for="faq_2">text
        </label>
        <img src="./arrow.svg" alt="arrow" class="faq__arrow">
      </div>
      <input class="faq__input" type="radio" name="faq" id="faq_2">
      <div class="faq__content">
        <p class="faq__text">
          text
        </p>
      </div>
    </label>
  </div>
</div>
  • Вопрос задан
  • 213 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Если прямо отвечать на спрошенное, то...
const items = document.querySelectorAll('.faq__input');
const onChange = ({ target: t }) => t
  .closest('.faq__items')
  .querySelectorAll('.faq__question--top')
  .forEach(n => n.classList.toggle('active', n.nextElementSibling.checked));

items.forEach(n => n.addEventListener('change', onChange));

Но вообще, предлагаю назначать класс элементам, находящимся максимально высоко, самым дальним не общим предкам радиокнопок. Т.е., .faq__item вместо .faq__question--top. Если в будущем задумаете стилизовать внутри выбранного .faq__item элементы, находящиеся за пределами .faq__question--top, то не придётся переписывать js-код.

Каким элементам надо переключать класс, что за радиокнопки находятся внутри, какой класс надо переключать, как класс переключать:

const itemSelector = '.faq__item';
const radioSelector = '.faq__input';
const activeClass = 'active';
const toggleActiveClass = radioGroupName => document
  .querySelectorAll(`${radioSelector}[name="${radioGroupName}"]`)
  .forEach(n => n.closest(itemSelector).classList.toggle(activeClass, n.checked));

Можно назначить обработчик события каждой радиокнопке индивидуально:

document.querySelectorAll(radioSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => toggleActiveClass(e.target.name));

А можно назначить делегированный обработчик странице:

document.addEventListener('change', ({ target: t }) => {
  if (t.matches(radioSelector)) {
    toggleActiveClass(t.name);
  }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
HardBot
@HardBot
back-end, front-end developer
document.querySelectorAll('.faq__item').forEach(item => { 
   item.addEventListener('click', event => { 
      // Если есть класс active - удалить, нету - добавить 
      item.querySelector('.faq__question--top').classList.toggle('active') 
   }) 
})
Ответ написан
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
.faq__question--top:has(input:checked) {
  /* нужные стили */
}


К сожалению не работает по умолчанию в FireFox. Но скоро уже можно будет юзать вовсю.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы