用jQuery显示隐藏图像

Question

FYI: I am learning how to code with an online tutorial. 仅供参考：我正在通过在线教程学习如何编码。 In this tutorial, we are learning javascript and jQuery. 在本教程中，我们正在学习javascript和jQuery。 The point is to: 重点是：

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

Show the image with scripts.js 使用scripts.js显示图像

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

The html is as follows: 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>

WHAT WORKS: 工作原理：

The html page looked fine. html页面看起来不错。 The bootstrap css works. 引导CSS起作用。 The image showed up fine. 图像显示良好。 The css script hid the image just fine. CSS脚本隐藏图像就好了。

WHAT DOES NOT WORK: 什么不起作用：

The jQuery is not showing the image when I click the paragraph. 当我单击段落时，jQuery不显示图像。

I have gone so far as to copy and paste the tutorial into sublime text 2, but it is still not working. 我已经尽力将本教程复制并粘贴到崇高的文字2中，但仍然无法正常工作。 I am 99% positive that everything is in the right folder. 我对所有内容都位于正确的文件夹中有99％的肯定。

在此处输入图片说明

Any ideas as to what could be the problem?! 关于可能是什么问题的任何想法？

Answer 1

Your code is perfect. 您的代码是完美的。 The only issue that was found/caught by the jsfiddle was the broken img tag. jsfiddle发现/捕获的唯一问题是损坏的img标签。

Tip! 小费！ If you can't get the image to load, then you can still view the error that was caught by the console. 如果无法加载图像，则仍然可以查看控制台捕获的错误。 That will help you know where the error was. 这将帮助您知道错误在哪里。 It will tell you whether image was not found or the js was not loaded or any other error. 它会告诉您是否未找到图像或未加载js或任何其他错误。 So go to the console and see for any messages. 因此，请转到控制台，查看是否有任何消息。

If you are sure that the error is in the code, then try to write it in a fiddle and provide it. 如果您确定错误出在代码中，请尝试用小提琴将其编写并提供。 Let us edit it! 让我们对其进行编辑！ :) :)

To test the jQuery code run this: 要测试jQuery代码，请运行以下命令：

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

This will englargen the text to 2em . 这将把文本扩大到2em 。 This is just a test so that to know that your code is working or not :) If nothing happens, then check your jQuery link. 这只是一个测试，以便知道您的代码是否正常工作：)如果什么也没发生，请检查您的jQuery链接。

Link the jQuery correctly as this was the only problem in your code. 正确链接jQuery，因为这是代码中的唯一问题。 Try to test it in the network tab too! 也尝试在“网络”标签中进行测试！ There you will find what type of directory is being used in the code. 在那里，您将找到代码中使用的目录类型。

Pointed out by Michelle , you need to link your js as 由Michelle指出，您需要将js链接为

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

Why? 为什么？ Because you need to write the exact name for the files to be linked, otherwise you'll get a 404 error; 因为您需要为要链接的文件写出准确的名称，否则会出现404错误； not found. 未找到。 So you need to write the code as above. 因此，您需要编写上面的代码。

Didn't you notice a 404 in the console? 您没有在控制台中看到404吗？ Just include the above code and remove the previous, and you'll get the code working. 只要添加上面的代码并删除前面的代码，您就可以使用该代码。

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

Answer 2

I don't see an attached screenshot of your folder structure, so I can't confirm, but my only guess is that image path is wrong. 我没有看到您的文件夹结构的屏幕截图，因此无法确认，但是我唯一的猜测是图像路径错误。 Confirm that you can get the image to show by removing the css that hides it. 确认您可以通过删除隐藏图像的css来显示该图像。 You can even confirm that jQuery is working by changing .show() to .hide() , or .toggle() 你甚至可以证实，jQuery是通过改变工作.show()来.hide()或.toggle()

用jQuery显示隐藏图像

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-11-17 15:05:10

解决方案2
1 2013-11-17 15:07:30

用jQuery显示隐藏图像

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-11-17 15:05:10

解决方案2 1 2013-11-17 15:07:30

解决方案1
1 已采纳 2013-11-17 15:05:10

解决方案2
1 2013-11-17 15:07:30