类型错误：$ 不是函数

Question

我正在尝试使用 PinchZoomer，这是一个 Wordpress 网站上的 Jquery 插件，但我在 firebug 中两次收到此错误：TypeError: $ is not a function

我知道我应该在 Wordpress 中使用“jQuery”而不是 $ 符号，但在这种情况下并没有什么不同。这是我的代码：

<script type="text/javascript">
jQuery( document ).ready(function($) {
        $(".pinchzoom").pinchzoomer();
});
</script>

这是我在 Wordpress 中加入 jQuery 和 PinchZoomer 插件的代码：

function add_jQuery_scripts() {

    wp_enqueue_script('jquery');
    wp_enqueue_script('hammer', get_template_directory_uri() . '/pinchzoomer/jquery.hammer.min.js', array() );
    wp_enqueue_script('mousewheel', get_template_directory_uri() . '/pinchzoomer/jquery.mousewheel.min.js', array() );
    wp_enqueue_script('pinchzoomer', get_template_directory_uri() . '/pinchzoomer/jquery.pinchzoomer.min.js', array() );
    wp_enqueue_script('modernizr', get_template_directory_uri() . '/pinchzoomer/modernizr.min.js', array() );
    wp_enqueue_script('tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array() );
}

add_action('wp_enqueue_scripts', 'add_jQuery_scripts');

This is the page pinchzoomer 应该在哪里工作。

我错过了什么？

Answer 1

最初的问题

根据 wp_enqueue_script 的Wordpress docs，第三个参数是该文件的依赖项。

这个参数是可选的并且接受一个数组类型。这样 jQuery 就可以用于该文件，您只需将其添加为依赖项即可。

例如：

wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/pinchzoomer/TweenMax.min.js', array('jquery'));

您可以阅读更多关于 here 的信息，其中文档解释了“链接依赖于 jQuery 的主题脚本”。

可能是冗余代码

我认为您不需要在代码中包含这部分，因为我认为 Wordpress 带有 jQ​​uery，并且您将在“入队”相关脚本时将其定义为依赖项：

wp_enqueue_script('jquery');

无冲突模式

最后，关于让 jQuery 不发生冲突并在函数中出现美元符号的评论。

通过在函数旁边的括号中添加美元符号，这基本上只是将 $ 符号引入本地范围，作为访问 jQuery 的一种方式，而无需每次在“无冲突”时重新键入 jQuery模式。

即这只是访问它的一种更短的方式。您可以阅读有关 Wordpress 中无冲突包装器的信息以及有关在文档中使用 $ 简称为 here 的信息。

因此，按照以下方式使用库应该没问题。

jQuery(document).ready(function($) {
  $(".pinchzoom").pinchzoomer();
});

PinchZoomer 的问题

通过查看插件源代码以及正如我们在 cmets 中所讨论的，这可能是第 1440 行的 PinchZoomer 插件本身存在问题，因为他们自己并没有使 $ 可用于其本地范围。

可以通过在线设置断点1440，刷新页面，将$的值设置为jQuery进行测试。如果您可以自己访问源代码，则可以进行修复，尽管实际上他们应该自己进行修复。

第 1433 - 1442 行的损坏代码应修复为如下代码：

(function($)
{
    function onReady()
    {
        PinchZoomer.init();
    }

    $(onReady);

}(jQuery));

Answer 2

当我转到您引用的页面时，如果我在控制台中评估 $，我会得到未定义，但 jQuery 已定义。我认为您的问题可能是回调变量，如果定义了jQuery，那么除非存在库冲突，否则您不必担心定义了$。

这应该可行：

jQuery( document ).ready(function() {
    $(".pinchzoom").pinchzoomer();
});

这是你正在做的事情的简写版本：

jQuery(function() {
    $(".pinchzoom").pinchzoomer();
});
// Or
$(function() {
    $(".pinchzoom").pinchzoomer();
});

作为匿名函数

另一种选择是将您的 jquery 包装在一个匿名函数中：

(function($) {
    // All of your jquery calls inside of here
    $(function() {
        $(".pinchzoom").pinchzoomer();
    });
})(jQuery);

Answer 3

您可以在准备功能之前添加此代码。

$=jQuery;

另外请在第二行使用 $ 或 jQuery 你使用 $ 请使用 jQuery 并检查。