本文讲解如何通过单次点击事件统一管理标签的 active 状态，并智能控制关联过滤文本（如 .filter）的样式显示与隐藏，避免重复绑定、状态不同步等问题。
本文讲解如何通过单次点击事件统一管理标签的 active 状态，并智能控制关联过滤文本（如 .filter）的样式显示与隐藏，避免重复绑定、状态不同步等问题。
在前端交互开发中，常需实现“点击标签高亮 → 同时激活关联筛选文案”的联动效果。原始代码存在两个关键问题：重复绑定 click 事件（导致逻辑割裂）、状态判断冗余（用 data('clicks') 手动维护布尔态），最终引发 .filter.active 类无法正确移除。
✅ 正确做法是：将状态切换与样式同步封装为单一、可复用的逻辑流。核心在于：
- 使用
toggleClass('active')替代手动addClass/removeClass，语义清晰且自动处理开关； - 将
.filter的 active 状态更新抽离为独立函数updateFilter()，通过$('.tag.active').length > 0判断是否有任意标签处于激活态； - 利用
toggleClass(className, condition)的条件式切换语法，精准控制.filter的类存在与否——当至少一个.tag拥有active时才添加.filter.active，否则自动移除。
以下是优化后的完整实现：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>
.tag.active { color: red; }
.filter.active { color: blue; font-weight: bold; }
</style><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>
<script>
function updateFilter() {
$('.filter').toggleClass('active', $('.tag.active').length > 0);
}
$('.tag').click(function() {
$(this).toggleClass('active');
updateFilter();
});
</script>
? 注意事项：
- 不要为同一元素多次绑定相同事件（如两个
.click(...)），易导致逻辑覆盖或重复执行； -
toggleClass(className, boolean)是 jQuery 提供的高效 API，比手动判断 + 增删更安全、简洁； - 若需支持多选（多个 tag 可同时 active），当前逻辑天然兼容；若需单选（仅一个 active），可在点击时先清除其他
.tag.active：$('.tag').not(this).removeClass('active')； - CSS 中建议为
.filter.active添加font-weight: bold，以呼应标题中 “the text filter will be bold” 的需求。
该方案结构清晰、可维护性强，适用于各类标签-文案联动场景，是 jQuery 交互开发中的典型最佳实践。
