Javascript FacetWP：使用jQuery在facet前后添加HTML

我想为我的facet使用一个collapse元素，因此在输出前后添加一些HTML。为了实现这一点，我使用以下代码

代码最初是在facet之前添加标签，如果没有选项，则将其隐藏。 我扩展了代码，在facet前后添加了一些HTML。以与标签相同的方式。 它工作正常，但是第一个

在facet开始之前关闭。所以崩塌无法发生

代码如下：

<script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            $('.facetwp-facet').each(function() {
                var facet_name = $(this).attr('data-name');
                var facet_label = FWP.settings.labels[facet_name];
                if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                    // collapse button before
                    $(this).before('<a class="btn btn-primary" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '">' + facet_label + '</a>');

                    // open collapse element
                    $(this).before('<div class="collapse" id="collapse_facet_' + facet_name + '">');

                    // label
                    $(this).before('<p class="h4 facet-label" data-for="' + facet_name + '">' + facet_label + '</p>');

                    // close collapse element
                    $(this).after('</div>');


                } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                    $('.facet-label[data-for="' + facet_name + '"]').remove();
                }
            });
        });
    })(jQuery);
</script>

（函数（$）{
$（document）.on（'facetwp-loaded'，function（）{
$（'.facetwp'）。每个（函数（）{
var facet_name=$（this.attr（'data-name'）；
var facet_label=FWP.settings.labels[facet_name]；
if（'undefined'！==typeof FWP.settings.num_choices[facet_name]&&FWP.settings.num_choices[facet_name]>0&&$（'.facet label[data for=“'+facet_name+”）。长度<1）{
//前折叠按钮
$（本）。在（''）之前；
//开放式折叠单元
$（本）。在（''）之前；
//标签
$（此）.before（'
“+facet\u label+”
”）；
//闭合塌陷单元
$（本）。在（''）之后；
}else if（'undefined'！==typeof FWP.settings.num\u choices[facet\u name]&&！FWP.settings.num\u choices[facet\u name]>0）{
$（'.facet label[data for=“'+facet_name+'”）.remove（）；
}
});
});
})（jQuery）；

有什么问题吗？ 也许JS不是最好的解决方案

我还找到了一个输出钩子来更改方面HMTL：

---

但我不知道如何使用它，也不知道需要在哪里添加HTML。或者是正确的钩子。

我发现了我的错误。问题是您只能将整个元素插入到DOM中（多亏了@Rory McCrossan:）

因此，我必须将代码更改为：

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var facet_name = $(this).attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];
            if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                // wrapper around the whole facet and button
                $(this).wrap('<div class="facet-wrapper facet-wrapper-' + facet_name + '" data-for="' + facet_name + '></div>');


                // collapse button before
                $(this).before('<a class="facet-collapse-link" data-for="' + facet_name + '" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '"><p class="h5 facet-label" data-for="' + facet_name + '">' + facet_label + '</p></a>');


                // collapse element
                $(this).wrap('<div class="collapse d-lg-block facet-collapse" data-for="' + facet_name + '" id="collapse_facet_' + facet_name + '"></div>');

            } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                $('.facet-label[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-wrapper[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-link[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse[data-for="' + facet_name + '"]').remove();
            }
        });
    });
})(jQuery);

（函数（$）{
$（document）.on（'facetwp-loaded'，function（）{
$（'.facetwp'）。每个（函数（）{
var facet_name=$（this.attr（'data-name'）；
var facet_label=FWP.settings.labels[facet_name]；
if（'undefined'！==typeof FWP.settings.num_choices[facet_name]&&FWP.settings.num_choices[facet_name]>0&&$（'.facet label[data for=“'+facet_name+”）。长度<1）{
//包裹整个镶嵌面和按钮
$（this）.wrap（“我发现了我的错误。问题是您只能将整个元素插入到DOM中（感谢@Rory McCrossan:）

因此，我必须将代码更改为：

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-facet').each(function() {
            var facet_name = $(this).attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];
            if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                // wrapper around the whole facet and button
                $(this).wrap('<div class="facet-wrapper facet-wrapper-' + facet_name + '" data-for="' + facet_name + '></div>');


                // collapse button before
                $(this).before('<a class="facet-collapse-link" data-for="' + facet_name + '" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '"><p class="h5 facet-label" data-for="' + facet_name + '">' + facet_label + '</p></a>');


                // collapse element
                $(this).wrap('<div class="collapse d-lg-block facet-collapse" data-for="' + facet_name + '" id="collapse_facet_' + facet_name + '"></div>');

            } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                $('.facet-label[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-wrapper[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse-link[data-for="' + facet_name + '"]').remove();
                $('.facet-collapse[data-for="' + facet_name + '"]').remove();
            }
        });
    });
})(jQuery);

（函数（$）{
$（document）.on（'facetwp-loaded'，function（）{
$（'.facetwp'）。每个（函数（）{
var facet_name=$（this.attr（'data-name'）；
var facet_label=FWP.settings.labels[facet_name]；
if（'undefined'！==typeof FWP.settings.num_choices[facet_name]&&FWP.settings.num_choices[facet_name]>0&&$（'.facet label[data for=“'+facet_name+”）。长度<1）{
//包裹整个镶嵌面和按钮
$（this）.wrap（$）