未捕获的引用错误：$未定义错误

Question

我从教程中拿到了这段代码，用于制作JavaScript / jQuery中的自动推进幻灯片，并且在jsfiddle中非常好用。然而，当我将所有内容带到Dreamweaver中时，它似乎就停止工作了。一切都在那里，我已经链接了所有相关文件（.js和.css文件），以及jQuery库。但出于某种原因，它根本无法工作。以下是代码。

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>

CSS（层叠样式表）

.fadeIn {
    position: relative;
    width: 800px;
    height: 500px;
}

.fadeIn img {
    position: absolute;
    left:0;
    top:0;
}

The Javascript/jQuery

$(function(){
    $('.fadeIn img:gt(0)').hide();
    setInterval(function(){
    $('.fadeIn :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadeIn');
    }, 3000);
});

这是标题

<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">

- Ivan P - Digital Alchemist

---

控制台有任何错误吗？ - isherwood

请提供您的 HTML 头部信息，这是一个源代码错误。 - DaniP

在本地作用域中定义 $ 之前，不能调用它。请参见答案。 - Alan Kis

Answer 1

经过尝试，我成功地重现了您提到的错误。如果您有使用其他JS库的函数和外部JS文件，请务必先加载该库，然后再加载依赖该库的JS文件及其函数。

例如，以下情况是不起作用的：

<script src="slideshow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

因为JavaScript解释器会在加载和定义之前搜索$符号。

但是，这样也可以：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="slideshow.js"></script>

- Alan Kis

Answer 2

确保您正在运行当前版本的jQuery。将其包含在头部部分中。

<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>

如果您使用的是Chrome浏览器，请右键点击，选择检查元素，然后选择控制台和错误信息，以查看错误日志。

在我看来，代码看起来很好，并且也能正常工作。

- Sergio Wizenfeld

---

Chrome浏览器控制台显示“未捕获的引用错误：$未定义” - Ivan P - Digital Alchemist

我按照你的建议包含了jQuery库，但仍然没有任何反应。 - Ivan P - Digital Alchemist

Answer 3

嗯，你需要确保所有东西都被加载了 为此，你可以这样做

window.onload = function() {
    $(function(){
    　　　　('.fadeIn img:gt(0)').hide();
    　　　　setInterval(function(){
    　　　　$('.fadeIn :first-child').fadeOut()
        　　.next('img').fadeIn()
        　　.end().appendTo('.fadeIn');
    　　　　}, 3000);
　　});

}

这意味着在 DOM 加载所有脚本后，它将执行您的函数。

- Emil Reña Enriquez