[英]ReferenceError: jQuery is not defined in self invoking function
我已经尝试了其他Stackoverflow主题中的所有解决方案,但是我的jQuery文件无法正常工作。 我使用Wampserver测试代码,并在多个浏览器(Firefox,Chrome,Opera)中进行测试。 每次都有同样的问题。
HTML
<script src="js/scripts.js"></script> <script src="js/jquery-3.2.1.min.js"></script>
我将这些行放在结束<\\ body>标记之前
scripts.js`
(function($) {
'use strict';
// holds current image shown
var $currNr = 0;
var links, images;
/**
* Function to prevent closures; adds click event handler to links
*/
var addEvents = function(nr) {
// add click event to link
$(links[nr]).on('click', function(e) {
showImage(nr);
e.preventDefault();
});
};
/**
* Function to show an image
*/
var showImage = function(nr) {
// find image
var $img = $(images[nr]);
if (!$img) return;
// find big image
var $photoBig = $('#photoBig');
// change
$photoBig.attr('src', $img.attr('data-src-l'));
$photoBig.attr('alt', $img.attr('alt'));
// remember current image number
$currNr = nr;
};
/**
* Function to show the next image
*/
var showNextImage = function() {
if ($currNr != (links.length - 1)) {
showImage($currNr + 1);
} else {
showImage(0);
}
};
/**
* Function to show the previous image
*/
var showPrevImage = function() {
if ($currNr != 0) {
showImage($currNr - 1);
} else {
showImage(links.length - 1);
}
};
// start scripts
$(window).on('load', function() {
// find images and links
links = $('#thumbsmenu li>a');
images = $('#thumbsmenu li>a img');
// add link events
$(links).each(function(nr) {
$(this).on('click', function(e) {
showImage(nr);
e.preventBubble();
});
});
// controls
$('#lnkFirst').on('click', function(e) {
showImage(0);
e.preventDefault();
});
$('#lnkPrev').on('click', function(e) {
showPrevImage();
e.preventDefault();
});
$('#lnkNext').on('click', function(e) {
showNextImage();
e.preventDefault();
});
$('#lnkLast').on('click', function(e) {
showImage(images.length - 1);
e.preventDefault();
});
// keyboard
$(document).on('keydown', function(e) {
var $code = (e.keyCode ? e.keyCode : e.which);
switch (event.keyCode) {
case 37: showPrevImage(); e.preventDefault(); break;
case 39: showNextImage(); e.preventDefault(); break;
}
});
// play
var $timer;
$('#btnPlay').on('click', function(e) {
if (!$(this).prop('playing')) {
$(this).val('stop');
$(this).prop('playing', true);
$currNr = 0;
$timer = setInterval(showNextImage, 1000);
} else {
$(this).val('start');
$(this).prop('playing', false);
clearInterval($timer);
}
});
});})(jQuery);`
我使用了一个自调用函数并将其用作参数,但是得到了:
ReferenceError:jQuery未定义
通常,此代码应该可以正常工作,这就是我当时的学习方式。 任何人都知道这里真正的问题是什么?
您正在jQuery之前加载scripts.js
更改以下代码:
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
至:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>
您的脚本加载顺序错误。 首先加载jQuery,然后使用它。
正如其他人建议的那样,您的订单是错误的。 为了让您在其他脚本文件中使用JQuery,需要将其完全加载。 像这样更改您的HTML:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.