Question

仅供参考：我正在学习如何使用在线教程进行编码。在本教程中，我们正在学习javascript和jQuery。重点是：

使用styles.css隐藏图像
```
img {
display: none;
 }
```

使用scripts.js

显示图像

$(function() {
$("p").click(function() {
$("img").show();
});
});

html如下：

<!DOCTYPE html>
<html>
<head>
 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
 <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
 <script src="js/jquery-1.9.1.js"></script>
 <script src="js/scripts.js"></script>
 <title>Peek-a-boo</title>
</head>
<body>
<div class="container">
  <h1>Peek-a-boo</h1>

  <p>Let's play peek-a-boo. Click here to see the surprise!</p>

  <img src="img/walrus.jpg">
</div>
</body>
</html>

工作原理：

html页面看起来不错。 bootstrap css有效。图像显示很好。 css脚本隐藏了图像。

什么不工作：

点击段落时，jQuery没有显示图像。

我已经将教程复制并粘贴到了崇高的文本2中，但它仍然无法正常工作。我99％肯定所有东西都在正确的文件夹中。

enter image description here

关于可能出现什么问题的任何想法？！

Answer 1

您的代码非常完美。 jsfiddle发现/捕获的唯一问题是损坏的img标记。

提示！如果无法加载图像，则仍可以查看控制台捕获的错误。这将帮助您了解错误的位置。它会告诉您是否未找到图像或未加载js或任何其他错误。所以去控制台查看任何消息。

如果您确定错误在代码中，那么请尝试将其写入小提示并提供它。让我们编辑吧！：）

要测试jQuery代码，请执行以下命令：

$(document).ready(function () {
  $('body').css({
    'font-size': '2em'
  })
})

这会将文本归结为2em。这只是一个测试，以便知道您的代码是否正常工作:)如果没有任何反应，请检查您的jQuery链接。

正确链接jQuery，因为这是代码中唯一的问题。尝试在网络选项卡中测试它！在那里，您将找到代码中使用的目录类型。

Michelle指出，您需要将您的js链接为

<script src="js/jquery-1.10.2.js"></script>

为什么呢？因为您需要为要链接的文件写出确切的名称，否则您将收到404错误;未找到。所以你需要编写如上所示的代码。

你没有注意到控制台中的404吗？只需包含上面的代码并删除之前的代码，您就可以获得代码了。

http://jsfiddle.net/afzaal_ahmad_zeeshan/RBL2X/1/

Answer 2

我没有看到您的文件夹结构的附加截图，所以我无法确认，但我唯一的猜测是图像路径错误。确认您可以通过删除隐藏它的CSS来显示图像。您甚至可以通过将.show()更改为.hide()或.toggle()

来确认jQuery是否有效

用jQuery显示隐藏的图像

2 个答案: