javascript实现一个按钮绑定多个事件

北硝

已于 2023-03-30 20:57:30 修改

阅读量2.1k

点赞数 3

分类专栏：前端文章标签： javascript 前端

于 2023-03-30 20:55:52 首次发布

本文链接：https://blog.csdn.net/m0_71912711/article/details/129866026

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

前言
一、第一种实现方法
- 代码如下（示例）：
二、第二种实现方法
- 代码如下（示例）：
总结

前言

javascript实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏

一、第一种实现方法

利用数组遍历思想实现多事件同一按钮的绑定

代码如下（示例）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>点击按钮显示/隐藏文字</title>
    <style>
        [id^="myText"] {
            display: none;
        }
    </style>
</head>

<body>
    <button id="myButton">点击显示/隐藏文字</button>
    <p id="myText1">这是需要显示/隐藏的文字1</p>
    <p id="myText2">这是需要显示/隐藏的文字2</p>
    <p id="myText3">这是需要显示/隐藏的文字3</p>
    <script>
        var button = document.querySelector('#myButton');
        var texts = document.querySelectorAll('[id^="myText"]');

        button.addEventListener('click', function() {
            for (var i = 0; i < texts.length; i++) {
                if (texts[i].style.display === 'none') {
                    texts[i].style.display = 'block'; // 显示文字
                } else {
                    texts[i].style.display = 'none'; // 隐藏文字
                }
            }
        });
    </script>
</body>

</html>

运行效果：
1.开始页面图在这里插入图片描述 2.点击之后：

3.再次点击之后：

二、第二种实现方法

利用特定的 JavaScript 函数库，名为 jQuery。它是一个流行的、免费的开源 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互等任务。通过从 CDN 引入 jQuery 库，可以避免服务器负载和提高文件加载速度，因为这个库可能已经被其他网站使用，并且被缓存在 CDN 上。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <button class="myButton">点击显示/隐藏文字</button>
    <p style="display: none;">这是需要显示/隐藏的文字1</p>
    <p style="display: none;">这是需要显示/隐藏的文字2</p>
    <p style="display: none;">这是需要显示/隐藏的文字3</p>
    <script>
        $(document).ready(function() {
            $(".myButton").click(function() {
                if ($("p").css("display") != "block") {
                    $("p").css("display", "block");
                } else {
                    $("p").css("display", "none");
                }
            });
        });
    </script>
</body>

</html>

运行效果：
1.开始页面图在这里插入图片描述 2.点击之后：

3.再次点击之后：

总结

通过两种方法实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏，希望对大家有帮助。

北硝

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript实现一个按钮绑定多个事件

javascript实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏通过两种方法实现一个按钮绑定多个事件，实现点击一个按钮实现多个隐藏文字的同时出现和隐藏。
复制链接

扫一扫