Question

我在我的html页面中放置了一个javascript（hide.js）...隐藏功能不起作用。
我的脚本顺序正确
我的代码是按照教程

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery Example </title>
</head>
<body>
    <p id="paragraph ">
        This is Paragraph</p>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>

hide.js

$('#paragraph').click(function () {
    $('#paragraph').hide();
});

我在Chrome上使用Firebug lite进行测试..控制台没有显示任何错误..在脚本中也显示外部脚本...其他脚本工作正常
我重新安排了像这样的脚本顺序

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

仍然无法正常工作.. 我找不到任何相关链接..错误..请建议

Answer 1

因为，你在jquery.js之前包含了hide.js。您应该在jquery.js之后包含hide.js，如此...

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

如果你必须在jquery.js之前先包含hide.js。将您的代码更改为

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

通过这种方式，您的脚本将在加载整个页面后工作。

或者，同样可以使用。

$(function() {
  // Your Code
});

Answer 2

顺序应该是，包括上面的jquery主文件。

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>

核心jQuery文件必须包含在任何其他插件之前，因为它们可能在内部使用核心jquery方法。

Answer 3

脚本顺序 - hide.js正在使用jQuery，因此必须在jquery.js之后包含它

<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>

您的浏览器控制台应该显示错误，例如Uncaught ReferenceError: $ is not defined

Answer 4

您的段落标记的ID中有一个空格，该空格无效，因此您的javascript无法使用该ID选择该段落。

您需要从id属性中删除空格。

Answer 5

你的id有空格。删除它然后再试一次 <p id="paragraph ">This is Paragraph</p>

它应该是这样的 <p id="paragraph">This is Paragraph</p>

Answer 6

我发现了一个非常奇怪的事情，可能是原因。它当然应该对你有所帮助。

在您的代码中，我看到您只有外部JS文件。在这些外部文件之后，请添加一个空的标记。它应该工作。

原因未知，但如果您没有内联或空脚本标记，则有时不会包含外部JS。深入挖掘将是非常有趣的。我想出来后让我更新。

环境：Chrome最新版本44.0.2403.130 m

外部JavaScript无法正常工作

6 个答案: