个人中心
gpt4 book ai didi

javascript - 单击后显示和隐藏元素

转载 作者：行者123 更新时间：2023-12-02 17:28:28 24 4
gpt4 key购买 nike

我想做的事情很简单。当我单击图像时，我希望显示一些消息。之后，当我再次单击它时，我希望它消失。我在实现它时遇到问题由于我缺乏 jQuery 知识。我希望对以下代码以及其他一些实现有所帮助。我知道我可以用 class="hidden"做一些事情并让 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，但我也一定做错了其他事情。

最佳答案

如果您使用 jQuery，这非常简单；只需使用它作为您的 JavaScript(不要忘记链接 jQuery 主库 - 我喜欢 Google CDN)。只需使用 toggle function :

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

此外，最好通过 jQuery 而不是您的 html 来注册 onClick(例如，参见 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>

Working example在 jsFiddle 中。

关于javascript - 单击后显示和隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23298757/

24 4 0
文章推荐： javascript - 使用 javascript 阻止当前用户 IP
文章推荐： javascript - AngularJS 按时间差排序
文章推荐： Javascript onclick 需要两次点击
文章推荐： javascript - 正则表达式没有解析我的图像网址
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com