Javascript 适用于 HTML 但不适用于 javascript 文件答案

【问题标题】：Javascript works in HTML but not javascript fileJavascript 适用于 HTML 但不适用于 javascript 文件
【发布时间】：2014-02-28 15:10:11
【问题描述】：

我的 javascript 代码适用于我的 html 文件，但是当我将它移动到它自己的 javascript 文件时，它不起作用。我检查了，这不是文件位置的问题。它在任何浏览器中都不起作用。请帮忙。谢谢。

我的 HTML 调用文件：

<script type="text/javascript" src="js/click-dropdown.js"></script>

这是我的 javascript 代码：

$(document).ready(function() {
$('.prospectus-click').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        //$('.prospectus-form > div').parent().removeClass('on');
        $('.prospectus-arrow').removeClass('prospectus-arrow-up');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.table-wrap').slideUp('fast');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($('.prospectus-click').next().is(':hidden') == true) {
                    //ADD THE IMGON CLASS TO THE IMAGE
            //$(this).find('.accimge').addClass('imgon');  
            //ADD THE ON CLASS TO THE BUTTON
            $('.prospectus-arrow').addClass('prospectus-arrow-up');
            //OPEN THE SLIDE
            $('.prospectus-click').next().slideDown('medium');
         } 

     });



    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    $('.prospectus-click').mouseover(function() {
        $(this).parent().addClass('over');

    }).mouseout(function() {
        $(this).parent().removeClass('over');                                       
    });

    $('.table-wrap').hide();


$('.live-consult').click(function() {       
        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.live-consult-div').slideUp('fast');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($('.live-consult').next().is(':hidden') == true) {
            $('.live-consult').next().slideDown('medium');
         } 

     });



    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    $('.live-consult').mouseover(function() {
        $(this).parent().addClass('over');

    }).mouseout(function() {
        $(this).parent().removeClass('over');                                       
    });

    $('.live-consult-div').hide();
});

【问题讨论】：

检查您的浏览器控制台是否有 javascript 错误，并向我们提供有关错误性质的更多详细信息...
确保在 jQuery 脚本之后引用脚本文件。
你真的在任何地方加载 jQuery 吗？正如@Nevett 所说，您必须在加载此脚本之前加载 jQuery。
你的脚本@pathjs/click-dropdown.js是否存在？
您的脚本正在使用 jQuery，因此您必须在调用其他文件之前加载它。

标签： javascript jquery html

【解决方案1】：

您编写的 Javascript 文件使用的是 jQuery 库。为了让它工作，你必须在你的脚本之前加载 jQuery 库。

你可以从这里下载 jQuery http://jquery.com/

为了提高性能，我还建议您使用缩小文件并让脚本在结束正文标记之前的 html 页面底部加载。

<script type="text/javascript" src="js/jquery-min-1.11.0.js"></script>
<script type="text/javascript" src="js/click-dropdown.js"></script>

【讨论】：

嗨，你能告诉我为什么在正文末尾加载脚本会提高性能。谢谢。
嗨，没问题。基本上，当您的浏览器加载页面时，它会从上到下加载项目，因此当它在顶部遇到您的 Javascript 时，它将首先读取并加载这些文件，然后再到达要在页面正文中呈现的任何 html。由于您想先加载页面然后再担心 javascript，因此在底部的 html 标记之后加载这些更有意义。有关更多信息，请查看此答案stackoverflow.com/questions/14547062/…

【解决方案2】：

正如 Nevett 和 David 提到的，怀疑您可能会在包含 jquery 库之前包含/加载您的“click-dropdown.js”文件。但是，如果您不确定包含脚本的顺序，那么简单的检测方法是检查您的开发控制台是否存在错误“ReferenceError：$ 未定义”，或者只是简单地编写

alert('我的 $ 是 '+typeof $);

作为脚本的第一行。如果警报说未定义，则在 jquery 之后包含您的脚本。如果警报说功能，那么请描述您面临的确切问题；任何错误，警告。

【讨论】：