jQuery(“#mycarousel”).jcarousel 不是函数

Question

我一定在这里做了一些非常愚蠢的事情，但我已经绞尽脑汁了一段时间了，但我无法找到问题所在。

在此页面上： http://ww2.accudata.com/

我正在尝试实现 jCarousel，但不断收到此错误:

jQuery("#mycarousel").jcarousel 不是函数

这是我的标题中的内容：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({

});
});
</script>

据我所知，我正在以正确的顺序加载所有脚本，并且我已经验证它们都是那里。那么为什么说它不是一个函数呢？

Answer 1

在第 39 行，您将重新加载 jQuery，这会覆盖 jQuery 对象，从而删除 .jcarousel 函数。确保您仅加载 jQuery 一次。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="http://ww2.accudata.com/wp-content/themes/accudata/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ww2.accudata.com/wp-content/themes/accudata/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({ //Would work if you called it here, but it gets deferred until the DOM is loaded

    });
});
</script>

...

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'></script>
<!-- This gets loaded after you load the plugin, overwriting the jQuery object -->

Answer 2

您看到的错误基本上意味着：

"we tried looking for the jcarousel function, and couldn't find it."

打开页面源代码并查看正在呈现的 HTML。 .js 文件的路径是否正确且符合您的预期？大多数时候，这是导致此类问题的原因。

因此，一旦您确定对 .js 文件的引用正确，请尝试如下操作：

<script type="text/javascript">
    $(document).ready(function() {
        $('#mycarousel').jcarousel({
            //Settings here.
        }); 
    });
</script>

Answer 3

您收到 jcarousel 函数未知的错误，这意味着带有 jcarousel 函数的 js 文件未正确加载。 （对 JQuery 本身的引用有效，因为 jQuery(document).ready... 没有给您错误）

查看渲染的 HTML 并查看路径是否使文件与他的实际位置相匹配。 （他们不是...）

顺便说一句，你为什么不使用 JQuery 别名 $？
jQuery('#mycarousel') =>; $('#mycarousel')

JQuery 口号是“少写多做”