jQuery 未捕获的引用错误：$ 未定义错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19456210/
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
Uncaught reference error: $ is not defined error
提问by Ivan P - Digital Alchemist
I took this code from a tutorial to make an auto advancing slideshow in javascript/jQuery and it works wonderfully in jsfiddle. However, when I bring everything over into Dreamweaver it seems to just stop working. Everything is there, I've linked all the relevant files (the .js and the .css) as well as the jQuery library. For some reason though it won't work at all. Here's the code.
我从教程中获取了这段代码，在 javascript/jQuery 中制作了一个自动推进的幻灯片，它在 jsfiddle 中运行得非常好。但是，当我将所有内容都带入 Dreamweaver 时，它似乎停止工作。一切都在那里，我已经链接了所有相关文件（.js 和 .css）以及 jQuery 库。出于某种原因，尽管它根本不起作用。这是代码。
The HTML
HTML
<div class="fadeIn">
<img src="image1.png" height="500" width="800"/>
<img src="image2.png" height="500" width="800"/>
<img src="image3.png" height="500" width="800"/>
<img src="image4.png" height="500" width="800"/>
</div>
The CSS
CSS
.fadeIn {
position: relative;
width: 800px;
height: 500px;
}
.fadeIn img {
position: absolute;
left:0;
top:0;
}
The Javascript/jQuery
Javascript/jQuery
$(function(){
$('.fadeIn img:gt(0)').hide();
setInterval(function(){
$('.fadeIn :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadeIn');
}, 3000);
});
Here's the header
这是标题
<script src="SlideShow.js" type="text/javascript"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="SlideShow.css">
回答by Alan Kis
After quick try, I managed to reproduce error you mentioned. If you have external js files with your function, which relly on other JS libraries, you have to load that library first, and then dependent JS file with your functions.
经过快速尝试，我设法重现了您提到的错误。如果您的函数有外部 js 文件，依赖于其他 JS 库，则必须先加载该库，然后将依赖的 JS 文件与您的函数一起加载。
For example, this won't work:
例如，这行不通：
<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Because, JS interpreter search for $ before is even loaded and defined.
因为，JS 解释器甚至在加载和定义之前搜索 $。
But, this will work:
但是，这将起作用：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>
回答by Sergio Wizenfeld
Make sure you are running a current version of jquery. include this in the head section
确保您运行的是当前版本的 jquery。将此包含在 head 部分中
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
check console log for error if you are on chrome right click, inspect element, console, errors.
如果您在 chrome 上单击鼠标右键，请检查控制台日志是否有错误，检查元素、控制台、错误。
the code looks good to me and works as well.
该代码对我来说看起来不错并且也能正常工作。
回答by Emil Re?a Enriquez
hmmm You need to make sure everything is loaded first to do that you can do
嗯，您需要确保首先加载所有内容才能执行您可以执行的操作
window.onload = function() {
$(function(){
('.fadeIn img:gt(0)').hide();
setInterval(function(){
$('.fadeIn :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadeIn');
}, 3000);
});
}
This means that after the dom finished loading all the scripts, its the time that it will execute your function.
这意味着在 dom 完成加载所有脚本之后，它会执行您的函数。
