子元素含active类时仅高亮对应父标签的jQuery实现问题

你的代码当前会全局高亮所有filter的原因是：updateFilter函数里用全局选择器选中了所有.filter，并且判断条件是页面上所有.tag.active的数量，只要有一个tag激活，所有filter都会被加上active类。

要实现仅高亮对应tag所在wrap里的filter，需要针对每个独立的.wrap容器单独判断，修改后的代码如下：

修改后的JavaScript代码 #

$('.tag').click(function() {
  $(this).toggleClass('active');
  updateFilter();
});

function updateFilter() {
  // 遍历每个wrap容器，单独处理
  $('.wrap').each(function() {
    // 检查当前容器内是否存在激活的tag
    const hasActiveTag = $(this).find('.tag.active').length > 0;
    // 给当前容器内的filter切换active类
    $(this).find('.filter').toggleClass('active', hasActiveTag);
  });
}

完整代码示例 #

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>

<div class="wrap">
  <p class="filter">filter 2</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>

CSS #

.tag.active {
  color: red;
}

.filter.active {
  color: blue;
}

原理说明 #

• 通过$('.wrap').each()遍历每个独立的容器，确保每个容器的判断互不干扰
• 用$(this).find('.tag.active')仅查找当前容器内的激活tag，避免全局判断
• 给当前容器内的.filter单独设置active类，实现精准高亮

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