Question

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

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

我在结束之前把这些行放在＆lt; \ body＆gt;之前标签

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

您正在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未在自调用函数中定义

3 个答案: