1

我想为我的构面使用折叠元素，因此在输出之前和之后添加一些 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不是最好的解决方案。

我还找到了一个输出挂钩来更改方面 HMTL：https ://facetwp.com/documentation/developers/output/facetwp_facet_html/

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

4

1 回答 1

0

我发现了我的错误。问题是您只能将整个元素插入 DOM（感谢@Rory McCrossan：https ://stackoverflow.com/a/372​​06113/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);

现在它工作正常。

于 2020-03-03T20:14:41.070 回答