ReferenceError: jQuery 没有在自调用函数中定义答案

【问题标题】：ReferenceError: jQuery is not defined in self invoking functionReferenceError: jQuery 没有在自调用函数中定义
【发布时间】：2017-10-24 13:44:02
【问题描述】：

我已经尝试了其他 Stackoverflow 主题的所有解决方案，但我的 jQuery 文件无法正常工作。我使用 Wampserver 来测试我的代码，并在多个浏览器（Firefox、Chrome、Opera）中进行测试。每次都是同样的问题。

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

我已将这些行放在结束标记之前

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 after 您的主脚本。之前加载它（改变行的顺序）
将 jquery 放在你的 scripts.js 之前
如果scripts.js使用的是jQuery，那么你需要先包含jQuery...

标签： javascript jquery html referenceerror

【解决方案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>

【讨论】：

哈，你去：）
谢谢！愚蠢的错误，忘记了顺序在jQuery中很重要。好久不见！
不仅适用于 JQuery。一般来说，如果 JS 脚本相互依赖，你总是需要正确地对它们进行排序。
@Lor 顺序在 HTML 中很重要，在这种情况下。
@JeremyThille 积极的一面是我永远不会忘记将来这样做:)

【解决方案2】：

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

【讨论】：

感谢您的帮助！

【解决方案3】：

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

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

【讨论】：

感谢您的快速回复！