12Vadim12
@12Vadim12

Как убрать псевдокласс passive?

<div class="third__filter-radio">
                  <div class="third__filter-radio-item">
                  <input type="radio" checked id="for-gender1" value="all" class="third__filter-radio-input" name="gender">
                  <label for="for-gender1" data-f="filter-all"  class="third__filter-radio-label-all">Все</label>
                </div>
                <div class="third__filter-radio-item">
                  <input type="radio"  id="for-gender2" value="man" class="third__filter-radio-input" value="man" name="gender" >
                  <label for="for-gender2" data-f="filter-man" class="third__filter-radio-label-all">Мужчины</label>
                </div>
                <div class="third__filter-radio-item">
                  <input  id="for-gender3" type="radio" value="woman" class="third__filter-radio-input" name="gender">
                  <label for="for-gender3" data-f="filter-woman" class="third__filter-radio-label-all">Женщины</label>
                </div>
                </div>

document.querySelector('.third__filter-btn').addEventListener('click', ()=>{
  const radioBox = document.querySelectorAll('input[name="gender"]');
  const filterWoman = document.querySelectorAll('.filter-woman');
  const filterMan = document.querySelectorAll('.filter-man');
  for(const f of radioBox){
    if(f.checked){
      if(f.value == 'man'){
        filterWoman.forEach(item =>{
          item.classList.add('passive');
        })
      }if(f.value == 'woman'){
        filterMan.forEach(item =>{
          item.classList.add('passive');
        })
      }
    }
  }
})
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
XanXanXan
@XanXanXan
document.querySelector('.third__filter-btn').addEventListener('click', () => {
    const filteringItems = document.querySelectorAll('.filter-man, .filter-woman');
    const checkedValue = document.querySelector('.third__filter-radio-input:checked').value;

    filteringItems.forEach(item => {
        const isPassive = checkedValue !== 'all' && !item.classList.contains(`filter-${checkedValue}`);
        item.classList.toggle('passive', isPassive);
    })
})
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы