Добавить/удалить класс [закрыт]

145

16 марта 2021, 17:44

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

<ul> 
  <li> 
    1 
    <div> 
      ghi 
    </div> 
  </li> 
  <li> 
    2 
    <div> 
      def 
    </div> 
  </li> 
  <li> 
    3 
    <div> 
      abc 
    </div> 
  </li> 
</ul>

Помогите пожалуйста решить задачу.
1. При клике на <li> нужно добавить класс этому <li>, а так же вложенному <div>, при повторном клике на этот же <li>добавленные классы должны удалиться.
2. При добавленном классе если кликнуть на другой <li> классы должны удалиться и добавиться тому <li> и вложенному <div> на который кликнули. Классы для <li>и<div> разные.

Answer 1

$('li').click(function() { 
    let hasFoo = $(this).hasClass('foo'); 
    let hasBaz = $(this).find('div').hasClass('baz'); 
     
    if (!hasFoo && !hasBaz) { 
        $('li').removeClass('foo'); 
        $('li').find('div').removeClass('baz');  
    } 
     
    $(this).toggleClass('foo'); 
    $(this).find('div').toggleClass('baz');  
});

.foo { 
  font-size: 18px; 
} 
 
.baz { 
  color: green; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li> 
    1 
    <div> 
      ghi 
    </div> 
  </li> 
  <li> 
    2 
    <div> 
      def 
    </div> 
  </li> 
  <li> 
    3 
    <div> 
      abc 
    </div> 
  </li> 
</ul>