Question

我正在尝试从各种在线教程中学习编程，并且我一直试图在过去三天中找出这个问题而没有成功。我有三个文件（myindex.html，stylesheet.css和jscript.js），我正在尝试确保在开始尝试不同的事情之前所有内容都已正确链接。

MyIndex.html文件包含：

   <!DOCTYPE>
<HTML>
    <head></head>
    <title>Mary</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

        <body>
            <div ID="contact">Hello</div>
        </body>
</HTML>

我的stylesheet.css文件包含：

#contact {
    height: 100px;
    width: 100px;
    background-color: #517F8F;
    border-radius: 25px;
    border: 2px solid blue;
    text-align: center;
    display: block;
    vertical-align: middle;
    line-height: 100px;
}

我的jscript.js文件包含：

$(document).ready(function(){
    $('#contact').click(function(){
        $(this).hide();
    }();
});

我一直将文件拖到chrome中以查看它是否可行。它显示div元素，但在单击时不会隐藏它。经过很多挫折之后，我将所有信息都输入到了jsfiddle，它说它工作正常，如果我单击该元素，它会在结果窗口中隐藏，它会像它应该的那样隐藏。我正在使用sublime来编辑它，但我也尝试过notepad ++。当我将索引文件拖到浏览器中时，我无法弄清楚为什么它无法正常工作。我知道这可能是一个愚蠢的问题，我真诚地感谢任何建议。

UPDATE !!

修正错误后，我的代码如下：

MyIndex.html

<!DOCTYPE HTML>
<HTML>
    <head></head>
    <title>Mary Bishop</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
    <script type="text/javascript" src="jscript.js"></script>

        <body>
            <div ID="contact">Hello</div>
        </body>
</HTML>

Stylesheet.css没有改变。

jscript.js文件是

$(document).ready(function(){
    $('#contact').click(function(){
        $(this).hide();
    });
});

我在谷歌浏览器中打开它，它给了我{}。而已。只是页面左上角的一对括号。我尝试了检查元素功能，但我不确定我在寻找什么。如果它告诉我有错误，那就不会告诉我该错误是什么。

Answer 1

2件事，一件肯定会破坏事物而另一件事只是语法错误。

你错过了：
```
<script type="text/javascript" src="jscript.js"></script>
```
MyIndex.html中的
。在包含jQuery *的<script>...</script>标记之后包含它。这告诉浏览器您的JavaScript文件在哪里，就像在link元素中包含样式表一样。
}();文件的第4行});应为jscript.js。

* 注意：您可以在jscript.js标记结束前的<div ID="contact">Hello</div>之后立即添加body文件。这两个地方都可以工作，你只需要把它放在jQuery之后。但是在所有HTML元素稍微加快页面呈现后，将其包含在body标记内，因为浏览器在加载jscript.js文件后才会加载body文件。 1}}。由于您无论如何都在等待文档准备就绪，因此获得的性能很小。

Answer 2

尝试以下方式：

   <!DOCTYPE>
<HTML>
    <head></head>
    <title>Mary</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript">
   $(document).ready(function()
   {
      $('#contact').click(function()
      {
         $(this).hide();
      });
  });
</script>
        <body>
            <div ID="contact">Hello</div>
        </body>
</HTML>

Sicne您已经将google cdn定位为jquery lib，您只需要提及另一个Script块并使用您想要使用的jquery方法。（另一件事，你在问题中提到你正在使用 jscript.js 但我在你的HTML代码中找不到它。）

Answer 3

似乎您没有包含jscript.js文件。这可以解释为什么它适用于JSFiddle而不是浏览器。只需在jQuery库包含下添加此行：

<script type="text/javascript" src="jscript.js"></script>

Answer 4

  <!DOCTYPE>
<HTML>
    <head></head>
    <title>Mary</title>
    <link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
        <body>
            <div ID="contact">Hello</div>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jsscript.js"> </script>
        </body>
</HTML>

将脚本标记放在最后，就在关闭body标记之前。始终使用相对协议，并始终准备好后备。

现在你的代码应该可以工作了。

JavaScript代码未在浏览器中执行

4 个答案: