javascript - FacetWP:使用 jQuery 在 Facet 之前和之后添加 HTML

Question

我想为我的构面使用折叠元素，因此在输出之前和之后添加一些 HTML。为了实现这一目标，我使用了以下代码。

代码最初是在构面之前添加一个标签，如果没有选项则将其隐藏。我已经扩展了代码以在构面之前和之后添加一些 HTML。就像标签一样。它工作得还不错，但第一个 <div>在构面开始之前关闭。所以崩溃是行不通的。

代码如下:

<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>

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

我还发现了一个输出 Hook 来更改方面 HMTL: https://facetwp.com/documentation/developers/output/facetwp_facet_html/

但我不知道如何使用它，也不知道需要在哪里添加 HTML。或者如果是右勾拳。

Answer 1

我发现了我的错误。问题是你只能将整个元素插入到 DOM 中(感谢@Rory McCrossan:https://stackoverflow.com/a/37206113/1788961)。

所以我必须将代码更改为:

(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);

现在一切正常。