FacetWP技术求助：选择指定单选按钮时重置其他过滤器

Hey Matt, 我之前在项目里也碰到过类似的FacetWP过滤器重置需求，给你两个靠谱的解决方案，肯定能帮你搞定：

方案一：利用FacetWP官方事件（推荐） #

直接用FacetWP提供的facetwp-select事件来监听单选选项的选择，这种方式不需要操作DOM，完全基于官方API，稳定性最高：

// 确保FacetWP初始化完成后再绑定事件
jQuery(document).on('facetwp-loaded', function() {
  // 监听facet选择事件
  jQuery(document).on('facetwp-select', function(e, params) {
    // 判断当前操作的是ex_type这个facet
    if (params.facet_name === 'ex_type') {
      // 保存当前选中的单选值（单选所以取数组第一个元素）
      const selectedVal = params.selected_values[0];
      // 重置所有过滤器
      FWP.reset();
      // 重新设置ex_type的选中值，避免被重置掉
      FWP.facets['ex_type'] = [selectedVal];
      // 触发过滤器刷新
      FWP.refresh();
    }
  });
});

方案二：通过事件委托操作DOM元素 #

如果你更习惯操作DOM，那可以用jQuery的事件委托来绑定动态生成的单选按钮点击事件（因为FacetWP的facet元素是动态加载的，直接绑定click会失效）：

jQuery(document).on('click', '.facetwp-facet-ex_type input[type="radio"]', function() {
  // 延迟100ms确保FacetWP先处理当前选择
  setTimeout(() => {
    // 保存当前选中的ex_type值
    const selectedVal = jQuery('.facetwp-facet-ex_type input[type="radio"]:checked').val();
    // 重置所有过滤器
    FWP.reset();
    // 重新勾选刚才选中的选项
    jQuery(`.facetwp-facet-ex_type input[type="radio"][value="${selectedVal}"]`).prop('checked', true).trigger('change');
    // 刷新过滤器
    FWP.refresh();
  }, 100);
});

注意事项 #

• 代码放置位置：可以加到主题的functions.php里通过wp_enqueue_script加载自定义JS文件，或者直接放在主题的footer.php里的<script>标签中（确保在jQuery和FacetWP的JS之后加载）。
• 第一种方案里，要确认params.facet_name的拼写和你后台的facet别名完全一致（就是你提到的ex_type）。

内容的提问来源于stack exchange，提问作者Matt - Salusa Community