隐藏/显示div在图像上单击jQuery？
[英]hide/show div on image click with jquery?
问题描述
I am trying to show/hide div when click on an image. 
单击图像时，我试图显示/隐藏div。 when I click on the image nothing happens. 当我单击图像时，没有任何反应。 What is wrong with my code 我的代码有什么问题
<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>
5 个解决方案
解决方案1
2 2012-07-23 21:58:31
It's probably because when your script executes, the close image doesn't exist yet. 可能是因为执行脚本时， close图像尚不存在。 Wrap your setup in a $(document).ready block 将设置包装在$(document).ready块中
Slight update: In a quick test on my own machine, calling .click(..) on the image tag didn't do anything. 轻微更新：在我自己的计算机上进行的快速测试中，在image标签上调用.click(..)并没有执行任何操作。 I changed it so the close element is actually the <a> , and things worked. 我对其进行了更改，因此close元素实际上是<a> ，并且一切正常。
Relevant HTML: 相关HTML：
<a id="close" href="#">Close (image goes here)</a>
解决方案2
1 已采纳 2012-07-23 22:18:35
<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. 另外，我将目标定位为标记，因此文本也将触发它。
解决方案3
0 2012-07-23 21:57:33
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. 当然，这也会隐藏您的图像，因此您无需单击任何内容。但这只是一个开始。
解决方案4
0 2012-07-23 22:05:33
When it comes to using id vs class names there is a pretty good rule of thumb. 当使用id vs类名时，有一个很好的经验法则。 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. 在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 1.）将脚本移到页面底部
2.) Wrap your code in a ready function (only executes once the dom is ready. 2.）将代码包装在ready函数中（仅在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>
解决方案5
0 2014-04-28 14:56:45
jQuery live is deprecated, jQuery documentation indicates to use .on("click", function(){ jQuery live已弃用，jQuery文档指示使用.on（“ click”，function（）{
}); }）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.