TypeError：$不是函数

Question

我试图在Wordpress网站上使用PinchZoomer，一个Jquery插件，但我在firebug中遇到此错误两次：TypeError：$不是函数

我知道我应该使用＆＃34; jQuery＆＃34;而不是Wordpress中的$符号，但它在这种情况下没有任何区别。这是我的代码：

<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附带了jQuery，并且您将其作为依赖项定义为“排队”相关脚本：

wp_enqueue_script('jquery');

无冲突模式

最后，关于将jQuery置于冲突并且函数中存在美元符号的注释。

通过在函数旁边的括号中加上美元符号，这基本上只是将$符号引入本地作用域，作为一种访问jQuery的方式，而不必每次都在'no'时重新键入jQuery冲突模式。

即。这只是访问它的一种较短的方式。您可以在Wordpress中了解没有冲突包装器，以及在文档中使用$作为简短here。

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

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

PinchZoomer的问题

从查看插件源代码开始，正如我们在评论中所讨论的那样，它可能是第1440行的PinchZoomer插件本身的一个问题，因为它们本身并没有$可用于它们的本地范围。 / p>

您可以通过在线设置断点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并检查。