javascript 使用jquery在图像点击时隐藏/显示div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11621126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide/show div on image click with jquery?
提问by user1481850
I am trying to show/hide div when click on an image. when I click on the image nothing happens. What is wrong with my code
单击图像时，我试图显示/隐藏 div。当我单击图像时，什么也没有发生。我的代码有什么问题
<script type="text/javascript">
$('#close').click(function(){
$('#main').show();
$('#login').hide();
});
</script>
<div style="float:right;"><a href="#">Close <img id="close" src="assets/close.png"></a></div>
回答by Dylan
It's probably because when your script executes, the closeimage doesn't exist yet. Wrap your setup in a $(document).readyblock
这可能是因为当您的脚本执行时，close图像还不存在。将您的设置包装在一个$(document).ready块中
Slight update:
In a quick test on my own machine, calling .click(..)on the image tag didn't do anything. I changed it so the closeelement is actually the <a>, and things worked.
轻微更新：在我自己的机器上的快速测试中，调用.click(..)图像标签没有做任何事情。我改变了它，所以close元素实际上是<a>，并且一切正常。
Relevant HTML:
相关 HTML：
<a id="close" href="#">Close (image goes here)</a>
回答by eteich
<script type="text/javascript">
$(function(){
$('#close').live('click',function(){
$('#main').show();
$('#login').hide();
});
});
</script>
<div style="float:right;"><a id="close">Close <img src="assets/close.png" /></a></div>
Use the live function. Also, I would target the a tag so the text also triggers it.
使用直播功能。此外，我将定位 a 标签，以便文本也会触发它。
回答by Kim Wilson
jQuery live is deprecated, jQuery documentation indicates to use .on("click", function(){
不推荐使用 jQuery live，jQuery 文档表明使用 .on("click", function(){
});
});
回答by Dan Vega
When it comes to using id vs class names there is a pretty good rule of thumb. If you are going to use it more than once in a template make it a class. In the case of main,login,header or footer an Id works fine but here I would use a class.
在使用 id 与类名时，有一个很好的经验法则。如果您打算在模板中多次使用它，请将其设为一个类。在 main、login、header 或 footer 的情况下，Id 工作正常，但在这里我会使用一个类。
Now that is not what's causing your issue but I thought I would point that out. Your problem is probably because the selector is trying to find something that is not there yet. You have 2 choices
现在这不是导致您出现问题的原因，但我想我会指出这一点。您的问题可能是因为选择器试图找到尚不存在的东西。你有2个选择
1.) Move your script to bottom of the page
2.) Wrap your code in a ready function (only executes once the dom is ready.
1.) 将您的脚本移至页面底部
2.) 将您的代码包装在一个就绪函数中（仅在 dom 就绪后才执行。
Here is an updated code example with my suggestions
这是我的建议的更新代码示例
<!DOCTYPE HTML>
<html>
<head>
<title>Click Handler</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.close').click(function(){
$('#main').show();
$('#login').hide();
});
})
</script>
</head>
<body>
<div style="float:right;"><a href="#" class="close">Close <img src="assets/close.png" class="close"></a></div>
<div id="main" style="display:none;">Main</div>
<div id="login">Login</div>
</body>
</html>
回答by Samson
First of all you shouldn't have the same ID multiple times.
首先，您不应该多次使用相同的 ID。
Then:
然后：
<script type="text/javascript">
$('#image').click(function(){
$('#close').toggle();
});
</script>
<div id="close" style="float:right;"><a href="#">Close <img id="image" src="assets/close.png"></a></div>
Of course this will hide your image also so you don't have anything to click on.. but it's a start.
当然，这也将隐藏您的图像，因此您没有任何可点击的东西......但这是一个开始。
