Question

我在点击图片时试图显示/隐藏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>

Answer 1

这可能是因为当您的脚本执行时，close图片尚未存在。将您的设置换入$(document).ready块

轻微更新：在我自己的机器上进行快速测试时，在图片标签上调用.click(..)并没有做任何事情。我更改了它，因此close元素实际上是<a>，并且事情有效。

相关HTML：

 <a id="close" href="#">Close (image goes here)</a>

Answer 2

<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>

使用实时功能。此外，我会定位一个标签，以便文本也触发它。

Answer 3

首先，您不应多次使用相同的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>

当然这也会隐藏你的图像，所以你没有任何东西可以点击..但这是一个开始。

Answer 4

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

现在这不是造成你问题的原因，但我想我会指出这一点。你的问题可能是因为选择器试图找到尚未存在的东西。你有两个选择

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>

Answer 5

jQuery live已被弃用，jQuery文档指示使用.on（＆＃34; click＆＃34;，function（）{

}）;

jQuery .live()

jQuery .on()

在图像上隐藏/显示div点击jquery？

5 个答案: