【问题标题】:Trying to link a local Javascript file to HTML document but in the browser, I receive a Failed to load resource error尝试将本地 Javascript 文件链接到 HTML 文档,但在浏览器中,我收到 Failed to load resource 错误
【发布时间】:2019-09-20 00:24:49
【问题描述】:

我正在尝试将 javascript 文件链接到我的 html 文档。

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

上面写着“你在 HTML 页面中包含 jQuery 和 jQuery UI(包含 datepicker 模块!)javascript 文件,然后,包含 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.multidatepicker.js 在我的本地项目目录中,因为它是自己的文件,不在任何文件夹中。您可以在包含此文件的 github 页面上下载一个 zip 文件。

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

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

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

 });
    </script>

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

 <input id="mdp-demo">

当我在浏览器中运行它时,我收到一个错误“加载资源失败:服务器响应状态为 404(未找到)”,用于 jquery-ui.multidatepicker.js:1。

如果您向下滚动到多个日期 github 页面上的演示并转到“表单输入”。这就是我想要达到的目标。问题是我的 jquery-ui.multidatepicker.js 脚本搜索没有找到该脚本,因此无法识别 .multiDatesPicker() 函数。

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

【问题讨论】:

  • 相对于您正在加载的 HTML 文件,JS 文件在哪里?

标签: javascript jquery html jquery-ui jquery-multidatespicker


【解决方案1】:

您应该使用 CDN 链接进行多日期选择器

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

如果您想使用&lt;script src="jquery-ui.multidatespicker.js"&lt;/script&gt;,您需要下载文件并将其放在同一个 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" />

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-30
    相关资源
    最近更新 更多