如何动态遍历FacetWP选中项并同步checked类到对应元素

实现代码 #

将以下代码添加到主题自定义JS区域、FacetWP自定义脚本配置项，或页面全局脚本文件中即可生效：

// 绑定FacetWP加载完成事件，兼容页面首次加载和ajax筛选后刷新场景
$(document).on('facetwp-loaded', function() {
    // 遍历所有筛选器下的单选选项
    $('.facetwp-facet .facetwp-radio').each(function() {
        const optionValue = $(this).data('value');
        // 跳过无有效值的选项，避免无效选择器报错
        if (!optionValue) return;
        // 根据当前选项的选中状态，同步对应类名元素的checked类
        if ($(this).hasClass('checked')) {
            $('.' + optionValue).addClass('checked');
        } else {
            $('.' + optionValue).removeClass('checked');
        }
    });
});

如果你的站点jQuery已禁用$别名，把代码中所有的$替换为jQuery即可正常运行。

逻辑说明 #

• 自动适配所有可选值，不需要手动逐个编写blue/red等固定值判断，后续新增筛选选项无需修改代码
• 绑定FacetWP官方提供的facetwp-loaded事件，不管是页面首次打开还是筛选操作后异步刷新，都会自动执行状态同步，不会出现失效问题
• 逐个匹配每个选项的选中状态，同步对应类名元素的样式类，不会出现误操作其他元素的问题

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