Jquery 计数器插件 Uncaught TypeError答案

【问题标题】：Jquery counter plugin Uncaught TypeErrorJquery 计数器插件 Uncaught TypeError
【发布时间】：2020-12-17 22:38:00
【问题描述】：

我正在尝试实现 JQuery 计数器插件，但出现错误：

dashboard:694 Uncaught TypeError: $(...).counterUp 不是函数

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="jquery.counterup.min.js"></script> 
</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">{{$tasks->count()}}</span></h2></div>
<script>
$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
      return n.replace(/,/g, '.');
    }
});
</script>
</body>
</html>

【问题讨论】：

可能路径错误<script src="jquery.counterup.min.js"></script> ，可能看起来应该像<script src="assets/js/jquery.counterup.min.js"></script>。这取决于您的项目目录树
问题解决了吗？

标签： javascript jquery

【解决方案1】：

请检查一下

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>

</head>
<body>
<div class="task-stat"><i class="icon-tasks"></i>Total tasks today<br><h2><span class="counter">1000</span></h2></div>
<script>
$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
      return n.replace(/,/g, '.');
    }
});
</script>
</body>
</html>

【讨论】：

嗨@jayakumar 它的工作原理，你能解释一下你改变了什么吗？
我删除了 {{$tasks->count()}} 以限制价值并更新为 cdn URL
@PrabhatKumar 是的，但 JQuery 版本似乎不是问题，但 1000 只更新了。提到的css类中的任何值都是它的输入
哦..我已经验证过了要么我们必须将 jquery 版本从 jquery-3.3.1.slim.min.js" 更新到 jquery/1.12.4/jquery.min.js 要么我们必须将航点 js 从 waypoints/2.0.3/waypoints.min.js 更新到 waypoints/4.0.0/jquery.waypoints.min.js

【解决方案2】：

更新你的 waypoints.min.js 库版本

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>

【讨论】：

【解决方案3】：

如果你有两个调用 jquery.waypoints.min.js 或 jquery.counterup.min.js 在另一个文件中注释其中一个。

【讨论】：