0

单击图像时,我试图显示/隐藏 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>
4

5 回答 5

2

这可能是因为当你的脚本执行时,close图像还不存在。将您的设置包装在一个$(document).ready块中

轻微更新:在我自己的机器上的快速测试中,调用.click(..)图像标签没有做任何事情。我改变了它,所以close元素实际上是<a>,并且一切正常。

相关HTML:

 <a id="close" href="#">Close (image goes here)</a>
于 2012-07-23T21:58:31.637 回答
1
<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>

使用直播功能。另外,我会定位 a 标签,这样文本也会触发它。

于 2012-07-23T22:18:35.553 回答
0

首先,您不应该多次拥有相同的 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>

当然,这也会隐藏您的图像,因此您没有任何可点击的内容。但这是一个开始。

于 2012-07-23T21:57:33.710 回答
0

在使用 id 与类名时,有一个非常好的经验法则。如果您要在模板中多次使用它,请将其设为一个类。在 main、login、header 或 footer 的情况下,Id 可以正常工作,但在这里我会使用一个类。

现在这不是导致您的问题的原因,但我想我会指出这一点。您的问题可能是因为选择器试图找到尚不存在的东西。你有2个选择

1.) 将您的脚本移动到页面底部
2.) 将您的代码包装在一个就绪函数中(仅在 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>
于 2012-07-23T22:05:33.777 回答
0

jQuery live 已弃用,jQuery 文档指示使用 .on("click", function(){

});

jQuery .live()

jQuery .on()

于 2014-04-28T14:56:45.977 回答