将 wp_localize_script() 对象传递给 js 文件时出现 jshint 错误答案

【问题标题】：jshint error when pass wp_localize_script() object to js file将 wp_localize_script() 对象传递给 js 文件时出现 jshint 错误
【发布时间】：2020-03-28 10:04:48
【问题描述】：

我正在尝试单击按钮并获得响应。

这是按钮

$output .= '<div class="col-md-12">';
    $label = __( 'More Stories', 'everstrap' );
    $output .= "<button type='buttn' class='button_two load-more-btn'>{$label}</button>";
$output .= '</div>';

我如何传递ajaxob 对象：

$script_data_array = array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'everstrap-scripts', 'ajaxobj', $script_data_array );

现在，JS文件代码如下：

window.EStrap = (function (window, document, $, undefined) {
    'use strict';

    var app = {
        init: function () {
            console.log('Working');
            $(window).on('scroll', app.handleSticky);
            $('.hamburger-btn').on('click', app.toggleNavDrawer);
            $('.nav-drawer-close').on('click', app.closeNavDrawer);
            $('.load-more-btn').on('click', app.loadMoreStories);
        },
        loadMoreStories:function(){
            var page = 2;
            var data = {
                'action': 'load_posts_by_ajax',
                'page': page,
                'security': ajaxobj.security
            };   
            $.post(ajaxobj.ajaxurl, data, function(response) {
                if($.trim(response) !== '') {
                    $('.load-more-stories').append(response);
                    page++;
                } else {
                    $('.load-more-btn').hide();
                }
            });
        },
        handleSticky:function () {
            if ($(window).scrollTop() > 600) {
                $('#main-nav').addClass('sticky-header');
            } else if ($(window).scrollTop() < 300) {
                $('#main-nav').removeClass('sticky-header');
            }
        },
        toggleNavDrawer:function () {
            var $nav_drawer = $('#nav-drawer');
            $nav_drawer.toggleClass('open');
        },
        closeNavDrawer:function () {
            var $nav_drawer = $('#nav-drawer');
            $nav_drawer.removeClass('open');
        }
    };

    $(document).ready(app.init);
    return app;
})(window, document, jQuery);

现在，当我保存更改时，我看到来自 jshint 的以下错误

资产/js/scripts.js 17 | “安全”：ajaxobj.security ^ 'ajaxobj' 未定义。 19 | $.post（ajaxobj.ajaxurl，数据，函数（响应）{ ^ 'ajaxobj' 未定义。

为什么这里无法访问ajaxobj，我该如何解决？

【问题讨论】：

标签： javascript ajax wordpress

【解决方案1】：

请在本地化之前正确检查 wp_enqueue_script('everstrap-scripts')。一世已经检查过这工作正常。请检查您的代码应该如下所示。

wp_enqueue_script( 'everstrap-scripts', get_template_directory_uri() . 
'/assets/js/everstrap_scripts.js' );
        //}

        $script_data_array = array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'security' => wp_create_nonce( 'load_more_posts' ),
        );

wp_localize_script( 'storefront-homepage', 'ajaxobj', $script_data_array );

然后使用 console.log 在 js 代码中添加检查。如下所示

window.EStrap = (function (window, document, $, undefined) {
'use strict';

console.log('ajaxobj.security' + ajaxobj.security);
})(window, document, jQuery);

【讨论】：