TypeError：$不是函数

问题描述 投票：0回答：3

我正在尝试使用PinchZoomer，这是Wordpress网站上的一个Jquery插件，但在萤火虫中两次出现此错误：TypeError：$不是函数

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

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

这是我的使jQuery和Wordpress中的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在哪儿起作用？

我想念什么？

javascript jquery wordpress pinchzoom
3个回答
2
投票

最初的问题

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

此参数是可选的，并且接受一种数组类型。为了使jQuery可以用于该文件，您需要做的就是将其添加为依赖项。

例如：

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

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

可能是冗余代码

我认为您不需要在代码中包含此部分，因为我认为jQuery附带了Wordpress，您可以在“使相关脚本“入队”时将其定义为依赖项：

wp_enqueue_script('jquery');

无冲突模式

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

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

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

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

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

PinchZoomer的问题

[通过查看插件源代码以及我们在评论中讨论的内容，第1440行的PinchZoomer插件本身可能会出现问题，因为它们本身并未将$用于其本地范围。

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

第1433-1442行上的破损代码应固定为类似于以下代码：

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

    $(onReady);

}(jQuery));
1
投票

当我在控制台中评估$时，进入您引用的页面时，我不确定，但是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);
0
投票

您可以在就绪功能之前添加此代码。

$=jQuery;

也请在第二行中使用$或jQuery，在使用$时请使用jQuery并检查。

0
投票

帮助我。我找不到此问题的解决方案

TypeError：h.ajax不是函数

这是我的头部

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- App scripts -->

此表

<table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>id</th>
                <th>medee</th>
                <th>unelgee</th>
            </tr>
        </thead>
    </table>

和这是我的数据表功能

 $(document).ready(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('showdata')}}",
            type: "GET",
        },
        columns: [{
                data: 'id',
                name: 'id'
            },
            {
                data: 'medee',
                name: 'medee'
            },
            {
                data: 'unelgee',
                name: 'unelgee'
            }
        ]
    });
});

这是我的存储库功能

public function all()
{   

    $users = DataModel::select(['id', 'medee', 'unelgee']);

    return Datatables::of($users)->make(true);
}

我有这个问题

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.