尝试 link 本地 Javascript 文件到 HTML 文档,但在浏览器中,我收到加载资源失败错误

Trying to link a local Javascript file to HTML document but in the browser, I receive a Failed to load resource error

我正在尝试将 link 一个 javascript 文件添加到我的 html 文档中。

我正在按照 http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/#demo-days-range 上的说明将日历中的 select 多个日期作为表单中的输入。

它说 "You include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker"。

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery-ui.multidatespicker.js"</script>

我做到了。

注意 jquery-ui.multidatespicker.js 在我的本地项目目录中,因为它是自己的文件,不在任何文件夹中。您可以在包含此文件的 github 页面上下载 zip 文件。

然后我调用文档头部的multidatespicker函数。

<script type="text/javascript">
        $(function() {

        $('#mdp-demo').multiDatesPicker();

 });
    </script>

最后在正文中写入要在函数中使用的 html 输入 ID

 <input id="mdp-demo">

当我在浏览器中 运行 时,我得到 jquery-ui.multidatespicker.js:1 的错误 "Failed to load resource: the server responded with a status of 404 (NOT FOUND)"。

如果您向下滚动到多个日期 github 页面上的演示,然后转到 "Form input"。这就是我想要实现的目标。问题是我的 jquery-ui.multidatespicker.js 脚本搜索没有找到脚本,因此无法识别 .multiDatesPicker() 函数。

关于我做错了什么有什么建议吗?

你应该为 multidatespicker 使用 CDN link

<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker@1.6.6/jquery-ui.multidatespicker.js"></script>

如果您想使用 <script src="jquery-ui.multidatespicker.js"</script>,您需要下载文件并将其放在同一个 HTML 文件夹中,这样就可以了。另请注意,您缺少打开标签的 >。

$(function() {

        $('#mdp-demo').multiDatesPicker();

 });
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker@1.6.6/jquery-ui.multidatespicker.js"></script>

 <input id="mdp-demo" />