Как добавить/удалить класс jQuery в фильтре?

Question

У меня есть фильтр на моем сайте. Существуют категории и отображает службы из категории, когда вы нажимаете на ссылку этой категории. Я хочу добавить анимацию для этих сообщений, поэтому, когда я нажимаю на категорию, чтобы анимировать эти сообщения. Я сделал анимацию, и все, что мне нужно, это добавить класс fade-in-services к каждому сообщению, когда я нажимаю на его категорию, и до этого, чтобы удалить, если этот пост имеет класс fade-in-services.

У меня есть два списка, один для категорий, другие для сообщений и выглядит следующим образом

<ul class="subcats"> 
<li> 
    <a href="#">All</a> 
</li> 
<li> 
    <a href="#">Cat1</a> 
</li> 
<li> 
    <a href="#">Cat2</a> 
    </li> 
</ul> 

<ul id="posts"> 
<li> 
    <a href="#"> 
    <div class="fade-in-services">Post 1</div> 
    </a></li> 
<li> 
    <a href="#"> 
    <div class="fade-in-services">Post 2</div> 
    </a> 
</li> 
<li> 
    <a href="#"> 
    <div class="fade-in-services">Post 3</div> 
    </a> 
</li> 
</ul> 

Так что, когда вы нажимаете на все это отображает все три сообщения, когда нажмите на Cat1 отображает только сообщение 1 и сообщение 2, и при нажатии на CAT2 отображается сообщение 3.

jQuery('.subcats li').click(function() {        
    jQuery('.hp-single-service').addClass('fade-in-services'); 
    jQuery(this).removeClass('fade-in-services'); 
    }); 

и эта работа, но не всегда, потому что jQuery(this) catch .subcats li и не удаляет класс fade-in-services. Поэтому, когда я перехожу к категории броска, если один столбец находится в двух категориях, сообщение не оживляет, потому что оно имеет класс fade-in-service.

Как это исправить?

Спасибо!

Answer 1

Я не уверен, что ваш код делает то, что вы думаете. Он выполняет следующие функции:

1. Устанавливает на мыши событие на 3 li в ul.subcats

2. Когда один из li щелкают его:

   2а. Добавляет .fade-in-services ко всем элементам с .hp-single-service

   2b. Удаляет .fade-in-services от щелчка li

   2bi. (который не имеет класса в какой-либо точке)