ReferenceError: jQuery is not defined in self invoking function

Question

我已经尝试了其他 Whosebug 主题的所有解决方案，但我的 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 is not defined

正常情况下，这段代码应该可以工作，那时候我就是这样被教导的。有人知道这里真正的问题是什么吗？

Answer 1

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

Answer 2

您的脚本加载顺序错误。先加载jQuery，再使用

Answer 3

正如其他人所说，您的订单有误。为了让您在其他脚本文件中使用 JQuery，需要完全加载它。像这样更改您的 HTML：

<script src="js/jquery-3.2.1.min.js"></script>    
<script src="js/scripts.js"></script>

ReferenceError: jQuery is not defined in self invoking function

ReferenceError: jQuery is not defined in self invoking function

html

javascript

jquery

referenceerror