Почему removeClass () работает, а hasClass () - нет?

Я использую некоторые классы CSS и jQuery для создания настраиваемого поля выбора. Но у меня все еще возникают проблемы с функцией removeClass (). Я знаю, что у этой проблемы есть альтернативы. Но может ли кто-нибудь объяснить мне, ПОЧЕМУ это не работает?

$(".filterselect").on("click",function(){
  $(this).find("ul").addClass("open");
});

$(".filterselect ul li").on("click",function(){
  $(this).parent().find("li").removeClass("active"); // THIS WORKS
  $(this).addClass("active"); // THIS WORKS
  if ($(this).parent().hasClass("open"))
  {
    console.info("test"); // THIS WORKS
  }
  $(this).parent().removeClass("open"); // THIS DOESN'T WORK :(
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class = "filter driedelig mw1">
  <div class = "filteritem">
    <div class = "filterselect">
      <ul>
        <li class = "active">Categorie 1</li>
        <li>Caetgorie 2</li>
        <li>Categorie 3</li>
      </ul>
      <i class = "fas fa-angle-down"></i>
    </div>
  </div>
</section>

Добавьте соответствующий HTML-код. Нам нужен минимальный воспроизводимый пример

— 03.10.2018 20:17

Для addClass вы используете find («ul»), можете ли вы сделать то же самое для removeClass? Вероятно, вы выбрали неправильный родительский элемент / элемент ..

— 03.10.2018 20:23

Я добавил html @ j08691

— 03.10.2018 20:25

jquery css class

03.10.2018 20:13

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 1

Событие накапливается, вызывая повторное срабатывание обработчика кликов .filterselect. Итак, является удаляет класс, просто добавляя его обратно.

Если вы остановите распространение события, этого не произойдет, но в первую очередь не будет получен класс, так как .filterselect вообще не получит событие.

Вы можете изменить свою функцию на эту, и она будет работать как положено:

$(".filterselect").on("click", function() {
  $(this).find("ul").addClass("open");
});

$(".filterselect ul li").on("click", function(e) {
  $(this).parent().find("li").removeClass("active");
  $(this).addClass("active");
  if ($(this).parent().hasClass("open")) {
    $(this).parent().removeClass("open");
    console.info("Remove class");
    e.stopPropagation();
  }
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class = "filter driedelig mw1">
  <div class = "filteritem">
    <div class = "filterselect">
      <ul>
        <li>Categorie 1</li>
        <li>Categorie 2</li>
        <li>Categorie 3</li>
      </ul>
      <i class = "fas fa-angle-down"></i>
    </div>
  </div>
</section>

Как вы говорите, есть и другие способы справиться с этим. Одним из них является удаление обработчика кликов .filterselect и управление состоянием ul из дочернего элемента. Это позволит событию по-прежнему всплывать, если на странице есть какое-либо поведение, которое от него зависит:

$("ul li").on("click",function(){
  $parent = $(this).parent(); // Cache the selector
  $parent.find("li").removeClass("active");
  $(this).addClass("active");
  if ($parent.hasClass("open")) {
    $parent.removeClass("open");
  } else {
    $parent.addClass("open");
  }
});

Работает как часы! Спасибо за объяснение.. ;)

— 03.10.2018 20:41

03.10.2018 20:34