Question

我想做的很简单。当我点击图像时，我想要显示一些消息。之后，当我再次点击它时，我希望它消失。我有问题补充它由于我缺乏jQuery知识。我将非常感谢以下代码的一些帮助，以及其他一些实现。我知道我可以用class =＆＃34;隐藏＆＃34;并让jQuery添加/删除它，但很好。

这是我尝试使用的内容。

<!DOCTYPE html>
<html>
<head>
<script>

function greet(){
    a = document.getElementById('here');

    if (a.trim().length==0){
        a.innerHTML = 'message!';
    }
        else{
        a.innerHTML = '';

    }

</script>
</head>
<body>

<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p> 
</body>
</html>

编辑：似乎我应该使用a.value，但我也必须做其他错误。

Answer 1

如果你使用的是jQuery，那很简单;只需使用它作为您的JavaScript（不要忘记链接jQuery主库 - 我喜欢Google CDN）。只需使用toggle function：

即可

function greet() {
    $('#here').toggle();
}

最好通过jQuery注册onClick而不是你的html（例如，见this SO question）。所以对于整个页面来说就是这样：

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
    $("#greet").click(
        function () { 
            $('#here').toggle();
        }
    );

    $("#here").hide();    
}
</script>
</head>
<body>

<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p> 
</body>
</html>

jsFiddle中的

Working example。

展示＆amp;单击后隐藏元素

1 个答案: