javascript - 如何在过滤器中添加/删除类 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. 在 ul.subcats

中的 3 li 上设置点击事件

2. 当其中一个 li 被点击时:

   2a。将 .fade-in-services 添加到所有带有 .hp-single-service

   的元素

   2b。从点击的 li

   移除 .fade-in-services

   2bi。 (在任何时候都没有类(class))