我想在我的 WordPress 网站中使用 counterup.js 但它显示错误

Question

我正在使用 http://www.jqueryscript.net/animation/Animating-Numbers-Counting-Up-with-jQuery-Counter-Up-Plugin.html js。在正常情况下 html 它工作正常但是当我在 WordPress 中使用这个脚本时它显示 Uncaught TypeError: undefined is not a function error。我的剧本是

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
<script src="<?php bloginfo('template_directory'); ?>/includes/jquery.counterup.js"></script>
<script>
    jQuery(document).ready(function( $ ) {
        $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
    });
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

而我的 html 是

<div> <span class="counter" style="display: inline-block; width: 32%">100</span> <span class="counter" style="display: inline-block; width: 32%">58</span> <span class="counter" style="display: inline-block; width: 32%">85</span> </div>

提前致谢。

Answer 1

您将对抗的 js 文件包含为 CSS 文件

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/includes/jquery.counterup.js">

用脚本标签替换 link 标签，看看是否成功。还可以尝试在任何其他插件脚本之前包含 jQuery 库，因为它们很可能需要 jQuery

Answer 2

在 jquery.min.js link.

之后移动 waypoins.min.js link

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>

另外 <link> 用于 CSS，但您包含 JS 文件：

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/includes/jquery.counterup.js">

Answer 3

检查这个。您没有正确包含脚本。

  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/includes/jquery.counterup.js">

您需要使用 wp_enqueue_script

正确排列脚本

wp_enqueue_script('mycounter',bloginfo('template_directory').'/includes/jquery.counterup.js',array('jquery'));

如果有任何依赖关系，也会在其他脚本之前加载 jquery。

WordPress 自带捆绑 jQuery，建议使用它而不是使用外部的。

我想在我的 WordPress 网站中使用 counterup.js 但它显示错误

I wanna use counterup.js in my WordPress site but it shows error

javascript

wordpress

jquery