Question

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

在noConflict模式下使用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

我检查过任何潜在的插件或主题冲突，但没有找到。我甚至试图明确声明像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参数是未定义的，因为参数永远不会传递/设置。因此，当你致电：

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

您收到错误：

Cannot read property 'addClass' of undefined

因为$ container不是对象。

无法阅读属性＆＃39; addClass＆＃39; Wordpress

1 个答案: