jQuery 绑定事件来回切换（入门）

半杯可可

已于 2023-12-29 10:26:51 修改

阅读量344

点赞数

文章标签： jquery 前端 javascript

于 2023-05-12 11:36:36 首次发布

本文链接：https://blog.csdn.net/m0_67840539/article/details/130636309

版权

😇作者介绍：一个有梦想、有理想、有目标的，且渴望能够学有所成的追梦人。

🎆学习格言：不读书的人,思想就会停止。——狄德罗

⛪️个人主页：进入博主主页

🗼专栏系列：无

🌼欢迎小伙伴们访问到博主的文章内容，在浏览阅读过程发现需要纠正的地方，烦请指出，愿能与诸君一同成长！

文章内容如下

✏️前言

在一些场景下，这样的切换功能也是比较常见的，当然，我这个是一个简陋示例，便于参考，运用到实际项目中，则需要小伙伴更加注重的写了。

✏️一、html添加按钮

👉首先在前端创建个按钮

<button id = "buttonId">切换</button>

<h1 id = "h1ID">小可爱我来了</h1>

✏️二、JavaScript 代码

👉写一个 javaScript 处理这个功能，在这里，来回切换，我这里配合原 js 一起使用

function buttonDianji () {
        //先使用原js获取按钮值，方便下面判断
        var buttonId =  document.getElementById("buttonID").innerText;

        //判断
        if(buttonId==="切换"){
            layui.use(['layer', 'jquery'], function () {
                //调用Jquer里面封装的方法
                var element = layui.element;
                var layer = layui.layer;
                var $ = layui.jquery;
                $("#h1Id").text("我喜欢你");
                //注意细节
                $("#buttonID").text("切回");

            } );
        }

        
        //判断
        if(buttonId==="切回"){
            layui.use(['layer', 'jquery'], function () {

                //调用Jquer里面封装的方法
                var element = layui.element;
                var layer = layui.layer;
                var $ = layui.jquery;


                $("#h1Id").text("小宝贝我来了")

                //注意细节
                $("#buttonID").text("切换");
            } );
        }
    }

✏️三、使用 JQuery 写

👉当然，不配合JQuery也可以达成相同的来回切换效果。使用JQuery 代码更加简洁（推荐）

function buttonID(){

        var buttonid = document.getElementById("buttonID").innerText ;

        if(buttonid === "切换"){

            document.getElementById("h1Id").innerText = "我喜欢你";

            //注意细节
            document.getElementById("buttonID").innerText = "切回";


        }

        if(buttonid === "切回"){
            document.getElementById("h1Id").innerText = "小可爱我来了";

            //注意细节
            document.getElementById("buttonID").innerText = "切换";

        }


    }