JS 在 WordPress 更新后不再工作 - Uncaught TypeError: $ is not a function

Question

上周我将我正在开发的网站更新为最新的 WordPress。自定义 JS 都不再工作了，我不知道为什么。

即使我分段删除它以尝试隔离问题，我总是会收到“未捕获的类型错误：$ 不是函数”。

我无法弄清楚是什么导致了这种情况发生。

据我所知，所有脚本都按预期加载。

不幸的是，我的自定义文件中的所有 JS 都是从 Stack Overflow 或其他在线资源中获取的 - 我不是自己编写的（仅修改过），因此正在努力诊断问题。

任何帮助将不胜感激

// apply effect to pages

var $headereffect = $('.hero-effect');

$headereffect.waypoint(function (direction) {
   if (direction == 'down') {
   $headereffect.addClass('hero-effect-animation');
   } else {
   $headereffect.removeClass('hero-effect-animation');
   }

}, { offset:'1px' });



// apply effect to default page headers



var $headereffect = $('#page-header');

$headereffect.waypoint(function (direction) {
   if (direction == 'down') {
   $headereffect.addClass('hero-effect');
   } else {
   $headereffect.removeClass('hero-effect');
   }

}, { offset:'1px' });

Answer 1

我的猜测是使用 jQuery 而不是 $，因为有时后者被其他脚本库使用，这会导致问题和冲突。

所以

var $headereffect = $('.hero-effect');

变成

var $headereffect = jQuery('.hero-effect');

这将解决当前问题，但其他问题也可能在稍后阶段提出。检查您的代码并确保使用一致的 jQuery 引用。

处理 $ 问题的选项 jQuery 方式可以找到here。从实用的角度来看，您可以通过使用 jQuery 的快捷方式将 jQuery 置于“无冲突”模式。在这种情况下，“$j”而不是默认的“$”：

var $j = jQuery.noConflict();
$j(function(){
    $j("#sidebar li a").hover(function(){
        $j(this).stop().animate({
            paddingLeft: "20px&"
        }, 400);
    }, function() {
        $j(this).stop().animate({
            paddingLeft: 0
        }, 400);
    });
});

作为Wordpress suggest 的最佳实践是将代码包装在立即调用的函数表达式中，将 jQuery 传递给它并在内部使用 $，如下所示：

( function( $ ) {
    // Your code goes here
} )( jQuery );