[英]hide/show div on image click with jquery?
单击图像时,我试图显示/隐藏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>
可能是因为执行脚本时, close
图像尚不存在。 将设置包装在$(document).ready
块中
轻微更新:在我自己的计算机上进行的快速测试中,在image标签上调用.click(..)
并没有执行任何操作。 我对其进行了更改,因此close
元素实际上是<a>
,并且一切正常。
相关HTML:
<a id="close" href="#">Close (image goes here)</a>
<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>
使用实时功能。 另外,我将目标定位为标记,因此文本也将触发它。
首先,您不应该多次使用相同的ID。
然后:
<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>
当然,这也会隐藏您的图像,因此您无需单击任何内容。但这只是一个开始。
当使用id vs类名时,有一个很好的经验法则。 如果要在模板中多次使用它,请将其作为类。 在main,login,header或footer的情况下,Id可以正常工作,但在这里我将使用一个类。
现在,这不是造成您的问题的原因,但我想我会指出这一点。 您的问题可能是因为选择器试图查找尚不存在的东西。 您有2个选择
1.)将脚本移到页面底部
2.)将代码包装在ready函数中(仅在dom准备好后才执行。
这是我建议的更新代码示例
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.