我的 JS 代码正在运行，但部分代码在页脚中可见。我该如何解决这个问题？

Question

我对 JS 很菜鸟，但我正在尽力学习。我添加了一些 JS 行以在 Wordpress 表单中添加功能。这是代码：

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
} elseif ( defined( 'WP_CLI' ) && WP_CLI ) {
    return;
}
add_action( 'wp_footer', function(){

    global $post;

    if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
    ?>
    <style>
        .forminator-ui .wpmudev-option-limit .wpmudev-disabled{
            color:#ddd!important;
        }
        .forminator-ui .wpmudev-option-limit .wpmudev-disabled span[aria-hidden]{
            border-color: #ddd!important;
        background-color: #ddd!important;
        }
    </style>
    <script type="text/javascript">
        
        ($=>{

            const _forminator_restrict_multiple_fields = {
                form_ids: [10097],
                limit: {
                    'checkbox-1': 1,
                    'checkbox-2': 1,
                    'checkbox-3': 1,
                    'checkbox-4': 1,
                    'checkbox-5': 1,
                    'checkbox-6': 1,
                    'checkbox-7': 1,
                    'checkbox-8': 1,
                    'checkbox-9': 1,
                    'checkbox-10': 1,
                    'checkbox-11': 8,
                    'checkbox-12': 8,
                },
                run : function( e, form_id ) {
                    if( _forminator_restrict_multiple_fields.form_ids.indexOf( form_id ) === -1 ){
                        return;
                    }
                    let _form = $( "#forminator-module-" + form_id );

                    _form.find('.wpmudev-option-limit').each(function(){
                        let _field = $(this),
                                checkbox_fields = _field.find( ":checkbox" );
                        if( checkbox_fields.length ){
                            checkbox_fields.on('change', function (e) {
                                let _parent = $(this).closest('.wpmudev-option-limit'),
                                        _parent_id = _parent.attr('id'),
                                        _selected = _parent.find(':checkbox:checked').length;
                                if( _parent_id in _forminator_restrict_multiple_fields.limit && _selected >= _forminator_restrict_multiple_fields.limit[ _parent_id ]){

                                    // save latest value.
                                    _field.data('latest_value', $(this).val() );
                                    // disable other options.
                                    _parent.find(':checkbox:not(:checked)').each(function(){
                                        $(this).prop('disabled', true).parent().addClass('wpmudev-disabled');
                                    });
                                }else{
                                    _parent.find(':checkbox:disabled').each(function(){
                                        $(this).prop('disabled', false).parent().removeClass('wpmudev-disabled');
                                    });

                                    _field.removeData('latest_value');
                                }
                            });
                        }

                        // auto remove previous value when riched the limit.
                        $(this).on('click', '.wpmudev-disabled', function(){
                            let _latest_value = _field.data('latest_value') ;
                            if( _latest_value ){
                                let _previous_opt = $(this).closest('.wpmudev-option-limit').find('input[value="'+ _latest_value +'"');
                                if( _previous_opt.length ){
                                    _previous_opt.trigger('click');
                                    $(this).removeClass('wpmudev-disabled').find('input:disabled').removeAttr('disabled');
                                }
                            }
                        })
                    });
                }
            }

            $(document).ready(function(){
                $.each(_forminator_restrict_multiple_fields.form_ids, function(i, _form_id){
                    _forminator_restrict_multiple_fields.run(this,_form_id);
                });
                $(document).on( 'response.success.load.forminator', _forminator_restrict_multiple_fields.run );
            });
        })(jQuery);

    </script>
add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 );
function wpmudev_limit_validation_checkbox() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
    jQuery( document ).ready( function($){
        setTimeout(function() {
            $('.forminator-custom-form').trigger('after.load.forminator');
        },100);

        $(document).on('after.load.forminator', function(event, form_id) {
            $.validator.addMethod("min_selection", function (value, element) {
                let parent = $(element).closest('.wpmudev-checkbox-limit');
                let selected = parent.find(':checkbox:checked').length;
                if ( selected == 8 ) { // Exact selection limit here.
                    return true;
                }
                return false;
            },"Please select 8 options.");
            $( ".wpmudev-checkbox-limit input" ).attr( "min_selection", "min_selection" );
        });
    });
    </script>
    <?php
}, 999 );

它运行良好，但部分代码在网站页脚下方可见，我真的不知道发生了什么。以下是可见的代码行：

add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 ); function wpmudev_limit_validation_checkbox() { global $post; if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) { return; } ?>

我做错了什么？怎么解决？

谢谢！

Answer 1

您面临的问题似乎是由于代码直接回显到页脚中，这导致它在前端可见。要解决此问题，您应该将 PHP 代码包装在输出缓冲区中，然后返回输出。

add_action( 'wp_footer', 'wpmudev_limit_validation_checkbox', 9999 );
function wpmudev_limit_validation_checkbox() {
    ob_start(); // Start output buffering
    global $post;
    if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'forminator_form' ) ) {
        return;
    }
    ?>
    <script type="text/javascript">
    jQuery( document ).ready( function($){
        setTimeout(function() {
            $('.forminator-custom-form').trigger('after.load.forminator');
        },100);

        $(document).on('after.load.forminator', function(event, form_id) {
            $.validator.addMethod("min_selection", function (value, element) {
                let parent = $(element).closest('.wpmudev-checkbox-limit');
                let selected = parent.find(':checkbox:checked').length;
                if ( selected == 8 ) { // Exact selection limit here.
                    return true;
                }
                return false;
            },"Please select 8 options.");
            $( ".wpmudev-checkbox-limit input" ).attr( "min_selection", "min_selection" );
        });
    });
    </script>
    <?php
    // Return the buffered content
    echo ob_get_clean();
}