点击tag切换.active类后，filter元素无法移除.active类及蓝色样式问题

问题根源 #

当前代码里的$('.active').length会把filter元素的.active类也统计进去，导致最后一个tag的.active被移除后，filter的.active还存在，numActive依然大于0，所以无法移除filter的样式。

修复后的代码 #

JavaScript #

$('.tag').click(function() {
  // 切换当前tag的active类
  $(this).toggleClass('active');
  
  // 只统计带有active类的tag数量
  const activeTagCount = $('.tag.active').length;
  const $filter = $(this).closest('.wrap').find('.filter');
  
  // 根据tag的激活数量切换filter的状态
  if (activeTagCount > 0) {
    $filter.addClass('active');
  } else {
    $filter.removeClass('active');
  }
});

CSS（无需修改） #

.tag.active {
  color: red;
}

.filter.active {
  color: blue;
}

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="wrap">
  <p class="filter">filter</p>
  <div class="tag-wrap">
    <a class="tag">tag 1</a>
    <a class="tag">tag 2</a>  
    <a class="tag">tag 3</a>
  </div>
</div>

关键改动说明 #

1. 用toggleClass('active')替代原来的手动判断data('clicks')，代码更简洁且逻辑一致
2. 统计激活数量时，精准选择.tag.active，排除filter元素的干扰
3. 合并两个独立的$('.tag').click事件，避免重复绑定事件导致的逻辑混乱

内容的提问来源于stack exchange，提问作者feliel93