Question

我在我的网站上有过滤器。有类别，当您单击该类别链接时，它会显示类别中的服务。我想为这些帖子添加动画，所以当我点击类别来动画这些帖子时。我制作了动画，我需要的是在点击他的类别时为每个帖子添加淡入服务类，如果该帖子有淡入服务类，则在此之前删除。

我有两个列表，一个用于分类，另一个用于帖子，看起来像这样

<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时，仅显示Post 1和Post 2，当您单击Cat2时显示Post 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

我不确定您的代码是否符合您的想法。它执行以下操作：

在li

ul.subcats

点击其中一个li时：

2a上。使用.fade-in-services
向所有元素添加.hp-single-service
2B。从点击的.fade-in-services
中移除li
2BI。（在任何时候都没有班级）

如何在过滤器中添加/删除类jQuery？

1 个答案: