javascript JQuery 和 Colorbox 已加载但“colorbox 不是函数”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20828916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery and Colorbox loaded but "colorbox is not a function"
提问by xv47
I have checked to see if both jQuery is loaded and the colorbox script is loaded and they both have been loaded correctly (I used .getScript to see if colorbox loaded correctly and I get a positive result). However the function does not load colorbox and Firebug says "$(...).colorbox is not a function". The code used to work but I'm not sure what I did to break it. Here's the header:
我已经检查了 jQuery 是否已加载，colorbox 脚本是否已加载并且它们都已正确加载（我使用 .getScript 来查看是否正确加载了 colorbox 并且我得到了肯定的结果）。但是，该函数不会加载 colorbox，Firebug 会说“$(...).colorbox 不是函数”。该代码曾经可以工作，但我不确定我做了什么来破坏它。这是标题：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="colorbox.css"/>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/scripts.js"></script>
<script>
$(document).ready(function(){
$(".popup").colorbox({transition: "elastic", opacity: 0.5, speed: 350});
var panels = $('.accordionButton > .accordionContent').hide();
$("div.accordionButton").click(function(){
panels.slideUp();
$(this).parent().next().slideDown();
return false
});
});
</script>
</head>
I have checked several times to make sure the script is located in the correct directory. Here is the link:
我已经检查了几次以确保脚本位于正确的目录中。链接在这里：
<div id='supermenu'><table><tr><td><a href='login.php?lang=en' class='popup'>Login</a></td><td> or </td><td><a href='register.php?lang=en'> Register </a></tr></td></table></div>
回答by Martin Hansen Lennox
You need to reference the colorbox file afterthe jquery file. Like this:
您需要在 jquery 文件之后引用 colorbox文件。像这样：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="Scripts/jquery.colorbox.js"></script>
<script src="Scripts/scripts.js"></script>
That is the case for most jquery plugins by the way.
顺便说一下，大多数 jquery 插件都是这种情况。
回答by ZoharAdar
I had the same error appears in Chrome browser.
我在 Chrome 浏览器中出现了同样的错误。
In case the solution above didn't helped, #MannyFleurmondsolution helped in my case. Try warp the colorbox js call with function($):
如果上述解决方案没有帮助，#MannyFleurmond解决方案对我有帮助。尝试使用函数（$）扭曲 colorbox js 调用：
(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
})(jQuery);
So my ColorBox call look like this:
所以我的 ColorBox 调用如下所示：
(function ($) {
$('#myelement').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.colorbox({ href: url, width: 936, height: 582, top: 160});
});
})(jQuery);
