ReferenceError:jQuery未在自调用函数中定义

Question

我已经尝试过其他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

通常这段代码应该有效,那就是我当时的教学方式.任何人都知道这里真正的问题是什么？

Answer 1

你scripts.js在jQuery之前加载

更改以下代码:

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