Блог

Главная - Вопросы по программированию - Почему я получаю неожиданное поведение при использовании операторов if / else?

Почему я получаю неожиданное поведение при использовании операторов if / else?

#javascript #jquery

#javascript #jquery

Вопрос:

Почему, когда я использую операторы if / else, я получаю неожиданное поведение кнопки filters Я имею в виду, что значение состояния атрибута class присваивается нескольким кнопкам, а не только одной. Когда я использую два оператора if, я получаю необходимое поведение кнопок

  //declate states-filters
 var $all = $("#all"); //find all items
 var $active = $('#active'); //find active items
 var $completed = $("#completed"); //find completeditems

 //filter-all
 $all.on('click', function(){
     if($all.is('[class!="active"]')){ //check the element have the active value of the class

         if($completed.has('[class="active"]')){
                 $completed.removeClass('active'); $all.addClass('active')
         }
         if($active.has('[class="active"]')){
                 $active.removeClass('active'); $all.addClass('active')
         }

 }
 })
 //filter-active
 $active.on('click', function(){
     if($active.is('[class!="active"]')){ //check the element have the active value of the class


         if ($all.has('[class="active"]')) {
             $all.removeClass('active'); $active.addClass('active');
         } if ($completed.has('[class="active"]')){
             $completed.removeClass('active'); $active.addClass('active')
         }
     }
 })

 //filter-complete
 $completed.on('click', function(){
     if($completed.is('[class!="active"]')){ //check the element have the active value of the class

         if ($all.has('[class="active"]')) {
             $all.removeClass('active'); $completed.addClass('active');
             
         } if ($active.has('[class="active"]')){
             $active.removeClass('active'); $completed.addClass('active')
         }
     }
 }) 
 <div class="states-filter">
    <p  class="state active" id="all"> All </p>
    <p  class="state" id="active"> Active </p>
    <p  class="state" id="completed"> Completed </p>
</div>

Комментарии:

1. Вы путаете has() с hasClass() и используете для этого неправильный синтаксис

Ответ №1:

Вам не нужно использовать событие щелчка для всего p тега.Поскольку все p теги имеют один и тот же класс, то есть: state вы можете использовать это как селектор.Затем, всякий раз, когда какое-либо состояние нажимается, добавьте active класс к этому элементу и удалите активный класс из других элементов, используя .not(this) и removeClass()

Демонстрационный код :

 var $all = $("p.state");

$all.on('click', function() {
  //p tag which is clicked add active class to that 
  $(this).addClass("active");
  //find p tag (not the one which is clicked remove active class from there)
  $(this).closest(".states-filter").find("p").not(this).removeClass("active")
}) 
 .active {
  color: red
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="states-filter">
  <p class="state active" id="all"> All </p>
  <p class="state" id="active"> Active </p>
  <p class="state" id="completed"> Completed </p>
</div>