jQuery函数中的PHP变量未正确传递

Question

我有几个使用wordpress wp_localize_scripts函数将PHP数据传递给JS函数的jQuery 函数：

function mb_scripts_settings() {

    // blanks
    $mb_ajax_form_type = $mb_get_page_slug = $mb_redirect = $mb_redirect_time = $mb_form_disable = $mb_array = '';

    // get the form type
    $mb_ajax_form_type      = ( is_front_page() ? 'change'  : 'submit'  );

    // get the page slug from ID
    $mb_get_page_slug       = get_post_field( 'post_name', get_the_ID() );

    // if the page is admin or password
    if( is_page( array('admin', 'pw') ) ) {
        $mb_redirect        = true;
        $mb_redirect_time   = 3000;
        $mb_form_disable    = true;

        if( is_page('admin') ) {
            // generate the url for redirection
            $mb_form_area           = ( ( is_page('admin') && isset($_GET['mbtab']) )   ? $_GET['mbtab']    : null      );
            $mb_form_area_url       = ( empty($mb_form_area)    ? '/' : '/admin/?mbtab=' . $mb_form_area . '&mbform=1'  );
            $mb_form_area_url       = get_home_url( $mb_form_area_url );
        }
    }

    // if the page is front
    if( is_front_page() ) {
        $mb_redirect        = false;
        $mb_redirect_time   = 0;
        $mb_form_disable    = false;
        $mb_get_page_slug   = 'front_page';
        $mb_form_area = $mb_form_area_url = null;
    }

    // build the array
    $mb_array = array(
                $mb_ajax_form_type,
                $mb_get_page_slug,
                $mb_redirect,
                $mb_redirect_time,
                $mb_form_disable
            );

    return $mb_array;
}

它将输出一个数组，其中包含JS函数所需的所有数据：

// create the script
$(function() {

    // var
    var mb_form_type        = mb_mbtheme_js[0],
        mb_form_type        = '.' + mb_form_type,
        mb_get_page_slug    = mb_mbtheme_js[1],
        mb_redirect         = mb_mbtheme_js[2],
        mb_redirect_time    = mb_mbtheme_js[3],
        mb_form_disable     = mb_mbtheme_js[4];

    // trigger the ajax on form type
    // $("#mb_ajax_form") + mb_form_type + ( function( mb_ajax_form ) {
    $("#mb_ajax_form").change( function( mb_ajax_form ) {

        // stop the default function of buttons
        mb_ajax_form.preventDefault();

        // do the ajax
        mb_ajax_form_js();

    });

});


// accept the form ID
function mb_ajax_form_js() {

    // get the vriables
    var mb_ajax_form_data   = new FormData( $("#mb_ajax_form")[0] ),
        mb_ajax_form_time   = 60,
        mb_ajax_form_links  = "#mb_ajax_form input, #mb_ajax_form submit, #mb_ajax_form button";


    // do the ajax
    $.ajax({
        method:         "POST",
        data:           mb_ajax_form_data,
        contentType:    false,
        processData:    false,

        // the before send function
        beforeSend: function( before ) {
                        // lock the form input and select
                        $( mb_ajax_form_links ).prop( "disabled", true );
                    },

        // the success function
        success:    function( success ) {
                        // show the response
                        $( "#response" ).show().html( success );

                        // scroll to the top of the container - response divHeight
                        $( "section.mbcontainer" ).animate({
                            scrollTop: $( "#response" ).offset().top
                        }, "slow" );

                        // re-enable the submit button
//                          $( mb_ajax_form_links ).prop( "disabled", false );
                    },

        // the complete function
        complete:   function( complete ) {
                        // if we are seeing the success message
                        if( $( "#response div" ).hasClass( "mbsuccessmessage" ) ) {

                            // the admin or password page conditions
                            if( mb_get_page_slug == 'admin' || mb_get_page_slug == 'pw' ) {
                                // set the redirection
                                setTimeout( function() { window.location.replace( mb_redirect ); }, mb_redirect_time );

                                // what to do with the form
                                $( mb_ajax_form_links ).prop( "disabled", mb_form_disable );

                            }

                            // the front page conditions
                            if(  mb_get_page_slug == 'front_page' ) {
                                // set the redirection
                                setTimeout( function() { $(".mbsuccessmessage").slideUp(); }, mb_redirect_time );
                            }
                        }
                    },

        // the error function
        error:      function( error ) {
                        // log the error
                        console.error( error );
                    }
    });
}

但是，它似乎没有按我想的那样工作，因为它没有通过数组传递并且都经过了硬编码。像这样的事情mb_form_type直到我用创建了一个新变量后才起作用'.' + mb_form_type。

现在它在complete:函数上吐出一个错误，但我也尝试过将if语句设置为String()== 进行比较，String(mb_get_page_slug) == String('admin')但这也不起作用。

在比较中我缺少什么吗？

Answer 1

你的问题是范围之一。 $(function() {});创建一个闭包，并在该闭包中定义您的变量。闭包外部的代码看不到这些变量。要解决此问题，您有多种选择，其中有 2 个可行：

1）将变量移到闭包外部，如下所示：

// var
var mb_form_type        = mb_mbtheme_js[0],
    mb_form_type        = '.' + mb_form_type,
    mb_get_page_slug    = mb_mbtheme_js[1],
    mb_redirect         = mb_mbtheme_js[2],
    mb_redirect_time    = mb_mbtheme_js[3],
    mb_form_disable     = mb_mbtheme_js[4];


// create the script
$(function() {

    // trigger the ajax on form type
    // $("#mb_ajax_form") + mb_form_type + ( function( mb_ajax_form ) {
    $("#mb_ajax_form").change( function( mb_ajax_form ) {

        // stop the default function of buttons
        mb_ajax_form.preventDefault();

        // do the ajax
        mb_ajax_form_js();

    });

});

// accept the form ID
function mb_ajax_form_js() {
    // your code here...omitted for brevity 
}

2）像这样将函数移动到闭包内（注意，任何调用mb_ajax_form_js也需要位于闭包内）：

// create the script
$(function() {

    // var
    var mb_form_type        = mb_mbtheme_js[0],
        mb_form_type        = '.' + mb_form_type,
        mb_get_page_slug    = mb_mbtheme_js[1],
        mb_redirect         = mb_mbtheme_js[2],
        mb_redirect_time    = mb_mbtheme_js[3],
        mb_form_disable     = mb_mbtheme_js[4];

    // trigger the ajax on form type
    // $("#mb_ajax_form") + mb_form_type + ( function( mb_ajax_form ) {
    $("#mb_ajax_form").change( function( mb_ajax_form ) {

        // stop the default function of buttons
        mb_ajax_form.preventDefault();

        // do the ajax
        mb_ajax_form_js();

    });



    // accept the form ID
    function mb_ajax_form_js() {
        // your code here...omitted for brevity 
    }

});

更新：

要使用字符串变量 ( ) 访问submit和函数，您需要使用“数组访问语法”，而不是您尝试过的点表示法。changemb_form_type

作为一个简单的示例，这可以工作（请注意 mb_form_type 不包含.）：

var mb_form_type = 'change';


$("#mb_ajax_form")[mb_form_type]( function( mb_ajax_form ) {
    alert('This will work using array access syntax');
});

这是一个工作示例