仅供引用:我正在通过在线教程学习如何编码。在本教程中，我们将学习 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 没有显示图像。
我已经将教程复制并粘贴到 sublime text 2 中，但仍然无法正常工作。我 99% 肯定一切都在正确的文件夹中。
关于可能是什么问题的任何想法？!
最佳答案
您的代码是完美的。 jsfiddle 发现/发现的唯一问题是损坏的 img 标签。
提示!如果您无法加载图像，您仍然可以查看控制台捕获的错误。这将帮助您了解错误出在哪里。它会告诉您是否找不到图像或未加载 js 或任何其他错误。因此，转到控制台并查看是否有任何消息。
如果你确定错误是在代码中，那么就试着把它写在fiddle中并提供它。让我们编辑它! :)
要测试 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 吗？只需包含上面的代码并删除之前的代码，您就可以使代码正常工作。
关于javascript - 使用 jQuery 显示隐藏图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20032136/