Question

我在将javascript链接到HTML文件时遇到了一些麻烦。外部链接工作正常，但我需要进行一些调整，并从我的计算机上的文件夹链接。我完全被难倒了，我不知道为什么我可以链接到外部js文件而不是我的计算机上的文件。

我有两个相同的Javascript文件，但在不同的文件夹中：

myWebsite/materialize.min.js
myWebsite/materialize/js/materialize.min.js

我的文件结构如下（我正在处理“materialui.html”）

myWebsite/
    |
    |- materialui.html
    |- materialize.min.js
    |
    |- materialize/
            |- css/
            |- fonts/
            |- js/
                    |- materialize.min.js
                    |- materialize.js

我尝试使用以下方法链接到本地.js文件：

//This one works:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 

//None of these work
<script src="materialize/js/materialize.min.js"></script>
<script src="materialize.min.js" ></script>
<script src="materialize/js/materialize.min.js" type="text/javascript"></script>
<script src="materialize.min.js" type="text/javascript"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="materialize.min.js"></script>

//And I have also tried pasting the entire code into the script tag. No luck.

以下是“materialui.html”的代码

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!-- Compiled and minified JavaScript-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

        <!-- This one works -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

        <!-- These do not -->
        <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
        <script type="text/javascript" src="materialize.min.js" ></script>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body> 

<div class="container">
    <div id="t" class="chips chips-initial"></div>
    <div class="chips chips-placeholder"></div>

    <script>
    //$(document).ready(function(e) { ]);

        //$('.chips').material_chip();
        $('.chips-initial').material_chip({
            data: [{
                tag: 'Apple',
            }, {
                tag: 'Banana',
            }, {
                tag: 'Mango',
            }],
        });

        $('.chips-placeholder').material_chip({
            placeholder: 'Enter tag Name',
            secondaryPlaceholder: '+Tag',
        });

        $('.chips').on('chip.add', function(e, chip){
            var data= $('#t').material_chip('data');
            var l = data.length;
            var i;
            $(".chips-initial input").val('lll');
            for (i = 0; i < l; i++) { 
                //if (data[i].tag[0] = "#") {
                    //alert(data[i].innerHTML);
                    data[i].delete;
                //}
            }
        });


    </script>   

</div>

</body>
</html>

我读过这些：
Can't attach local Javascript file to HTML
javascript not linking with html file
Javascript file not linking to html
Javascript file path not linking correctly
Javascript external file not linking correctly
和ol'可信赖
https://www.w3schools.com/html/html_filepaths.asp如果我错过某事

Answer 1

你是否在控制台中获得了404？我建议编辑你的第一个js链接到以下并删除第二个。希望它适合你。

 <!-- These do not -->
    <script type="text/javascript" src="./materialize/js/materialize.min.js"></script>

Answer 2

我把它弄清楚了出于某种原因，我不得不在底部更改脚本。我不知道为什么，但它现在有效。

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!-- Compiled and minified JavaScript-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <!--Let browser know website is optimized for mobile-->
    <script type="text/javascript" src="./materialize/js/materialize.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body> 

    <div class="container">
        <div class="chips chips-initial"></div>
    </div>

    <script>

        $(document).ready(function(e) { 

            $('.chips-initial').chips({
            data: [{
                    tag: 'Apple',
                }, {
                    tag: 'Microsoft',
                }, {
                    tag: 'Google',
                }],
            });

        });

    </script>   

    <script>
        M.AutoInit();
    </script>

</body>
</html>

本地链接的Javascript文件不起作用

2 个答案: