javascript - JQuery: "$ is not a function"与 ASP.NET 中的多个 JavaScript 文件

Question

我有一个 javaScript 文件，它提供带有 jQ​​uery 的动态选项卡，它本身就可以正常工作:

SpecificationAndAvailabilityTabs.js

var height;

//Have the specifications tab open by default.
$(document).ready(function () {
    $('.tabs #defaultOpen').addClass('active');
    $('.tabs #Overview').show();
    height = $('.tabs #Overview').height();
});

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active",     "");
    }

    document.getElementById(tabName).style.display = "block";
    $('.tabs #' + tabName).height(height);//Give the Availability content      area the same height as given to the Specification content area.
    evt.currentTarget.className += " active";
}

现在我尝试在同一目录中引入第二个文件，现在我只是尝试执行一些非常基本的操作来查看它是否有效，但它不起作用:

AvailabilityIcons.js

$(document).ready(function () {
    $("button").click(function () {
        $("p").hide();
    });
});

以下是添加到我的 ASP.NET 应用程序 View 中的脚本:

...
//Script for tab toggle functionality
Html.AppendScriptParts("~/Themes/WCA/Scripts/SpecificationAndAvailabilityTabs.js");
//Script for Dynamic Availability Icons
Html.AppendScriptParts("~/Themes/WCA/Scripts/AvailabilityIcons.js");
...

现在，第二个文件本身甚至不会出现该问题，但由于某种原因，它会导致所有 javaScript 文件中对“$”的所有引用都无法识别:

根据我的研究，我不断遇到避免两者冲突的常见解决方案

(function($) {
    /*My Code*/
}(jQuery);

以及使用:

jQuery.noConflict();

但是上述两个文件上的这两种解决方案的组合都无法为我解决任何问题。我将再次指出，如果我去掉第二个“AppendScriptParts”，第一个文件将 100% 工作。非常感谢任何帮助。

Answer 1

我想补充一点，如果您包含 jQuery，请确保它包含在脚本之前。

这是因为您的脚本依赖于它，因此如果您在脚本后面包含 jQuery，它将不会运行。