合并两段jQuery代码实现FacetWP分类筛选动态触发功能

// 采用事件命名空间避免重复绑定，先解绑再绑定新事件
$(document).off('click.facetShowTrigger').on('click.facetShowTrigger', "[class*='show-']", function (e) {
    // 阻止事件冒泡，避免父级元素绑定的同类事件重复触发
    e.stopPropagation();
    // 若可点击元素是a标签等自带默认行为的元素，可取消默认行为避免干扰
    e.preventDefault();

    // 遍历class列表提取show-前缀后的参数，避免多class场景下的提取错误
    const classArr = $(this).attr('class').split(' ');
    let chapterVal = '';
    for (let i = 0; i < classArr.length; i++) {
        if (classArr[i].startsWith('show-')) {
            chapterVal = classArr[i].slice('show-'.length);
            break;
        }
    }
    // 空值拦截，避免无效的筛选刷新
    if (chapterVal === '') return;

    // FacetWP 筛选逻辑
    $.each(FWP.facets, function (name, val) { FWP.facets[name] = []; });
    FWP.facets['chapter'] = [chapterVal];
    FWP.is_reset = true;
    FWP.refresh();
});

导致单次点击触发两次FacetWP响应的常见原因及对应修复逻辑如下：

• 事件冒泡：你的可点击元素是.chapter .show-designs-four-a，若.chapter父容器也绑定了点击事件触发筛选逻辑，事件冒泡就会导致两次执行，代码中增加e.stopPropagation()即可阻止冒泡。
• 事件重复绑定：如果代码在页面初始加载、FacetWP每次刷新后都重复执行了绑定操作，就会出现同一个点击事件触发多次回调的问题，代码中使用off先移除指定命名空间的事件再重新绑定，即可彻底避免重复绑定问题。
• 原有逻辑冲突：如果你的可点击元素同时带有fs-前缀的class，原有第一段代码会触发对应data-value元素的点击，若该元素也绑定了FacetWP筛选逻辑，也会导致重复执行，可根据业务场景调整判断逻辑排除冲突。

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