无法读取未定义的属性 'Velocity'

Question

我在使用 Velocity js 的 wordpress 上遇到了问题。

在 function.php 中，我已经将 velocity.min.js 和 velocity.ui.min.js 排队，就像这样

wp_enqueue_script('velociti-min-js', STYLESHEET_URI . '/assets/js/velocity.min.js', array('jquery'), THEME_VERSION, true);
wp_enqueue_script('velociti-ui-min-js', STYLESHEET_URI . '/assets/js/velocity.ui.min.js', array('jquery'), THEME_VERSION, true);

然后我用我的自定义 javascript 代码将 main.js 文件加入队列

wp_enqueue_script('main-theme-function', STYLESHEET_URI . '/assets/js/main-theme-function.js', NULL, THEME_VERSION, TRUE);

当我尝试注册一个新的速度效果时，比如

$.Velocity
.RegisterEffect("myeffect", {
    defaultDuration: 1,
    calls: [ 
        [ { translateY: '-50%'}, 1]
    ]
});

我在控制台上收到此错误

Uncaught TypeError: Cannot read property 'Velocity' of undefined

但我不明白为什么...有人可以帮忙吗？

非常感谢

Answer 1

Uncaught TypeError: Cannot read property 'Velocity' of undefined

在你的情况下意味着“$”（JQuery）没有价值。

主要是因为 JQuery 没有添加到您身边或 Velocity 库之后。确保先 load/add Jquery 然后是 Velocity。

但不知道在 wordpress 中如何。

Answer 2

您应该尝试使用 jQuery.Velocity。或者，您可以将调用包装在一个 IIFE 中，该 IIFE 将 jQuery 别名为 $.

(function ($) {
    // $.Velocity...
})(jQuery);

Answer 3

很可能是加载顺序错误。 WP 以某种随机顺序加载 JS 文件，除非您添加依赖参数。

您需要将 velocity js 文件作为依赖项添加到 main.js。

wp_enqueue_script('velociti-min-js', STYLESHEET_URI . '/assets/js/velocity.min.js', array('jquery'), THEME_VERSION, true);
wp_enqueue_script('velociti-ui-min-js', STYLESHEET_URI . '/assets/js/velocity.ui.min.js', array('jquery', 'velocity-min-js'), THEME_VERSION, true);
wp_enqueue_script('main-theme-function', STYLESHEET_URI . '/assets/js/main-theme-function.js', ['velociti-min-js', velociti-ui-min-js'], THEME_VERSION, TRUE);

我用数组 ['velociti-min-js', velociti-ui-min-js'] 替换了队列中的 NULL - 您使用为脚本设置的标签作为值。这将确保这些文件在您的主 js 之前加载。

无法读取未定义的 属性 'Velocity'

Cannot read property 'Velocity' of undefined

wordpress

jquery

velocity.js

无法读取未定义的属性 'Velocity'