Question

我收到错误＆＃39; $未定义＆＃39;来自js文件的第一个选择器。我已将JQuery引用添加为本地文件或谷歌CDN。此外，我已经尝试将它放在HTML文件的开头和结尾。还检查了控制台的网络部分，以检查JQuery是否正确加载。但似乎它无法识别$。还尝试将整个JS文件放在$（document）.ready（function（））中该功能正常，但我仍然收到错误。我尝试过不同的浏览器和不同的系统。

＆＃13;

$(document).ready(function () {
	var currentIndex = 0;
	var itemAmt;
 

	function cycleItems() {
		var item = $('.imageContainer div').eq(currentIndex);
		$('.imageContainer div').hide();
		item.css('display', 'inline-block');
	}

	var autoSlide = setInterval(function () {
		currentIndex += 1;
		if (currentIndex > $('.imageContainer div').length - 1) {
			currentIndex = 0;
		}
		cycleItems();
	}, 3000);

	$('.next').click(function () {
		clearInterval(autoSlide);
		currentIndex += 1;
		if (currentIndex > $('.imageContainer div').length - 1) {
			currentIndex = 0;
		}
		cycleItems();
	});

	$('.prev').click(function () {
		clearInterval(autoSlide);
		currentIndex -= 1;
		if (currentIndex < 0) {
			currentIndex = $('.imageContainer div').length - 1;
		}
		cycleItems();
	});
});

＆＃13;

.imageContainer {
  max-width: 400px;
  background-color: black;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.imageContainer div {
  background-color: white;
  width: 100%;
  display: inline-block;
  display: none;
}
.imageContainer img {
  width: 100%;
  height: auto;
}

.next {
  right: 5px;
  position: absolute;
}

.prev {
  left: 5px;
  position: absolute;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="HomeStyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../HomePage/Slider.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
	<script  type="text/javascript" src="../HomePage/jquery-latest.js"></script>
    <title>Home!</title>
</head>
<body>
    <div id="gallery">
            <section class="slider">
                <button class="next">Next</button>
                <button class="prev">Previous</button>
                <div class="imageContainer">
                    <div style="display: inline-block;">
                        <img src="http://placeimg.com/400/200/people" />
                    </div>
                    <div>
                        <img src="http://placeimg.com/400/200/animals" />
                    </div>
                    <div>
                        <img src="http://placeimg.com/400/200/people" />
                    </div>
                    <div>
                        <img src="http://placeimg.com/400/200/tech" />
                    </div>
                </div>
            </section>
        </div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
	<script  type="text/javascript" src="../HomePage/jquery-latest.js"></script>
    </body>
</html>

＆＃13;

如何让它无误地工作？

Answer 1

Javascript文件按照添加到页面的顺序加载。您添加的第一个javascript文件是../Homepage/slider.js，我猜测它使用jQuery来执行任何操作。这意味着它在某个时候引用了$。但是等一下：jQuery尚未加载！这会导致您看到的错误，因为浏览器可能已经开始下载jQuery，但在完成任何前面的脚本之前不会执行它。

如果你将jQuery移到顶部（你可能只需要包含它一次，而不是顶部4次，底部4次），这应该可以解决你的问题。

更好的是，将所有脚本声明移到页面底部，这意味着他们不会阻止页面的其余部分进行渲染。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        ...
    </head>
    <body>
        ...
        <script type="text/javascript" src="../HomePage/jquery.min.js"></script>
        <script type="text/javascript" src="../HomePage/Slider.js"></script>
    </body>
</html>

您还可以使用requireJS之类的内容来确保脚本的加载顺序，但这是一个高级主题，远远超出了您在此处所做的范围。

Answer 2

您必须只添加一次jquery库。由于您的jquery代码位于$(document).ready(function(){和})内，您可以在html代码的任何位置添加它，但在任何使用jquery的库之前（可能是您的slider.js）

Answer 3

jquery应该包含在所有其他脚本之前，具体取决于它......

我认为这是导致$ is undefined错误的问题......

＆＃39; $未定义＆＃39;错误但功能正常

3 个答案: