无法在 Wordpress 中使用 smoothState.js 读取未定义的 属性 'addClass'

Question

我正在尝试将 smoothState.js 实施到自定义 WordPress 主题中。我很困惑。根据 smoothState 文档，我觉得我的代码是正确的，但它仍然会产生错误。但我仍然是 JS/JQuery 和一般脚本的初学者，所以我可能遗漏了一些东西。

在无冲突模式下使用 JQMigrate 版本 1.4.1 和 JQuery 1.12.4。 WordPress 是 4.6.1.

jQuery(document).ready(function($){ // WordPress doesn't release $ so we need this line
$(function() {
    var $body = $('html, body'),
    content = $('#wrapper').smoothState({
        prefetch: true,
        pageCacheSize: 4,
        debug: true,
        // onStart is for when a link is clicked
        onStart: {
            duration: 2500, // animation duration in ms
            render: function (url, $container) {
                $container.addClass('is-exiting');
                $body.animate({
                    scrollTop: 0
                });
                smoothState.restartCSSAnimations();
            }
        },
        onEnd : {
            duration: 1500, \
            render: function (url, $container, $content) {
                $container.removeClass('is-exiting');
                $body.css('cursor', 'auto');
                $body.find('a').css('cursor', 'auto');
                $container.html($content);
                // Trigger document.ready and window.load
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter : function(url, $container, $content) {

        }
    }).data('smoothState');
});

(function($, undefined) {
    var isFired = false;
    var oldReady = jQuery.fn.ready;
    $(function() {
        isFired = true;
        $(document).ready();
    });
    jQuery.fn.ready = function(fn) {
        if(fn === undefined) {
            $(document).trigger('_is_ready');
            return;
        }
        if(isFired) {
            window.setTimeout(fn, 1);
        }
        $(document).bind('_is_ready', fn);
    };
})(jQuery);

});

单击#wrapper 内的任何超链接会引发以下控制台错误...

Uncaught TypeError: Cannot read property 'addClass' of undefined
    w @ jquery.smoothState.min.js:9
    b @ jquery.smoothState.min.js:9
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3

我检查了任何潜在的插件或主题冲突并发现 none。我什至尝试过像 var $container = $("#wrapper"); 这样显式声明容器，但仍然得到相同的结果。有什么想法吗？

Answer 1

查看 smoothState onStart documentation 后，渲染函数似乎只接受一个参数，如下所示：

$('#main').smoothState({
  onStart: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {}
  }
});

您的代码有两个：

render: function (url, $container) {

这可能会导致您的渲染函数 url 参数被设置为 $container，因为它是传递的第一个参数，并且 $container 参数未定义，因为参数永远不会 passed/set.因此，当您调用：

$container.addClass('is-exiting');

您收到错误：

Cannot read property 'addClass' of undefined

因为 $container 不是对象。