本文为付费教程的骨架翻译：场景与步骤按原文梳理，锁定部分的代码按 Bricks 官方机制补全实现，并已注明「补全实现」。未复制原文代码。
场景：互斥筛选器的联动隐藏
社区里一个非常典型的真实需求：页面上有一个地点查询循环，每条地点挂了四个自定义字段——交通方式（Select：Car / Motorcycle / Bicycle）、开车耗时（Range）、骑车耗时（Range）、步行耗时（Range）。
问题在于：同一地点可能同时支持多种交通方式，三种耗时字段都有值。访客选了「开车」却误把「骑车耗时上限」也调了，查询就会按互斥条件过滤，大量地点凭空消失。需求是：选了哪种交通方式，就只显示对应的耗时筛选器，隐藏其余两个。
注意：Bricks 1.10.3 起，Select 自定义字段的多选值不被支持（本教程基于单选场景）。
Step 1：搭建查询与筛选器
- 在 Bricks 编辑器中设置一个 Posts 查询循环，并给每种自定义字段各加一个筛选器（Filter）：
- 交通方式：Select/Radio（单选）
- 开车耗时 / 骑车耗时 / 步行耗时：Range 类型
- 字段组配置参考：Mode of transportation（Select，选项 Car/Motorcycle/Bicycle）+ 三个 Range 字段，且每个 Range 字段仅在编辑器中对应交通方式被选中时显示（ACF 条件逻辑）。
- 这样编辑时数据是干净对应的：选了 Car 的地点，只有开车耗时被填写。
Bricks 的筛选器本身已经负责「按字段值过滤文章」，本教程只额外处理一件事：根据交通方式的选择，显示/隐藏对应的 Range 筛选器，防止访客设出互斥条件。
Step 2：按选项联动显隐（补全实现）
付费原文锁定，这里按 Bricks 机制补全实现。思路：给三个 Range 筛选器容器分别加自定义类名（如 .filter-car、.filter-motorcycle、.filter-bicycle），监听交通方式下拉的 change 事件，只显示匹配的那一个：
// 补全实现：根据交通方式选择联动显隐 Range 筛选器
document.addEventListener( 'DOMContentLoaded', function () {
const transportSelect = document.querySelector( '#transport-filter select' ); // 交通方式下拉
const rangeWrappers = {
car: document.querySelector( '.filter-car' ),
motorcycle: document.querySelector( '.filter-motorcycle' ),
bicycle: document.querySelector( '.filter-bicycle' ),
};
if ( ! transportSelect ) return;
const apply = () => {
const value = transportSelect.value.toLowerCase();
Object.entries( rangeWrappers ).forEach( ( [ key, el ] ) => {
if ( ! el ) return;
el.style.display = ( key === value ) ? '' : 'none';
} );
};
transportSelect.addEventListener( 'change', apply );
apply(); // 页面加载时先执行一次，同步初始状态
} );把这段 JS 放在页面自定义代码（Bricks 页面设置的 Scripts）或 Code 元素里，选择器 .filter-* 换成你在 Bricks 里给筛选器容器设置的实际类名。初始状态下默认显示与当前选中项对应的筛选器。
原理说明
- 核心逻辑是「一个单选值 → 一组显隐映射」：值匹配的显示，其余隐藏。映射关系清晰，也方便扩展更多交通方式。
- 显隐只做 CSS
display切换，不销毁 DOM，Bricks 筛选器状态（已填的值）得以保留，来回切换不丢数据。 - 初次加载调用一次
apply()很重要：URL 参数或默认值带来的初始状态必须和筛选器可见性一致。 - 如果筛选器重渲染（如 AJAX 刷新列表后 DOM 被替换），需要改用事件委托或在 Bricks 的重渲染回调里重新绑定。
小结
「按一个筛选器的值联动显隐其他筛选器」本质是纯前端的显隐映射，和查询本身无关。骨架思路：容器加类名 → 监听 change → 匹配则显示。锁定部分按 Bricks 机制补全实现，类名与选择器请按你的模板调整。
小结：互斥筛选器的联动隐藏 = 单选值到容器类名的映射 + change 事件切换 display。注意初始状态同步与重渲染后的重新绑定两个细节。