问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery的.toggle()方法只能用于元素的显示与隐藏吗？

头像
几点黄叶
    4381183120

    若是我想实现点击第一次，执行函数1；点击第二次执行函数2。我需要使用那些方法呢？我还以为toggle可以实现呢。

    我写的代码是这个样子的：
    图片描述

    效果是：

    1.页面刷新之后，控制台打印“11”，此时根本没有点击；
2.点击按钮没有反应，请问到底是怎么回事？怎么写？
    javascriptjquery
    阅读 5.5k
    6 个回答
    得票最新
    头像
    ruhua
      24823648

      1.9之参数就不是函数了，只保留元素的显示和隐藏，官方说是为了提高性能。

      头像
      majormayer
        9681890111

        可以实现的哦！
        但是我发现和jquery版本有很大关系，其他的版本我都试了，都带有隐藏效果，但是这个可以：

        <script src="http://www.w3school.com.cn/jquery/jquery.js">

        效果：
        图片描述

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://www.w3school.com.cn/jquery/jquery.js">
</script>
</head>
<body>
    <button id="foldbox1">toogle</button>
</body>
<script>
$(document).ready(function(){
            $("#foldbox1").toggle(function () { console.log("22") }, function () { console.log("11") });
});
</script>
</html>
        头像
        施展TIGERB
          9.5k116994

          貌似是的。。。

          头像
          六个核桃
            -11
            新手上路，请多包涵

            一定版本之后就不再支持了，只支持显示隐藏。

            头像
            lanse_yan
              1.1k358

              jQuery 1.8之后就不支持事件的切换，仅用来元素的隐藏与显示。不过，可以通过自己写代码实现。
              1.通过flag来控制执行执行哪个函数。比如执行fn1时，flag置为true；执行fn2时，flag置为false.
              2.通过给元素加减class来控制那个函数。和方法1类型。
              3.代码实现toggle，避免方法1和方法2中添加变量和操作dom，毕竟这两个都需要开销，原理类似于递归调用,代码如下。

              $('#btn').one('click', function(){
    handler1();//第一次已经是click了，所以需要先执行一次handler1
    setTimeout(fn1, 200);//防止后面定义的事件被触发。
});
function  fn1(){
    var obj = $(this);
    obj.one('click',function(){
        handler2();
        fn2(obj);
    });
}
function  fn2(obj){
    obj.one('click',function(){
        handler1();
        fn1(obj);
    });
}

function handler1(){
    console.log('11');
}
function handler2(){
    console.log('22');
}

              当然为了使用方便，也可以封装成jQuery插件的模式。

               $.fn.toggleEx = function(handler1, handler2){

    $(this).one('click', function(){
        handler1();
        setTimeout(fn1, 200);//防止后面定义的事件被触发。
    });

    function  fn1(){
        var obj = $(this);
        obj.one('click',function(){
            handler2();
            fn2(obj);
        });
    }
    function  fn2(obj){
        obj.one('click',function(){
            handler1();
            fn1(obj);
        });
    }

}

//使用方式和之前一样。
$('#btn').toggleEx(function(){
    console.log('11');
}, function(){
    console.log('22');
});
              头像
              warjiang
                57213

                题主可以参考我这个,如果还问题私信我

                <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-demo</title>
</head>
<body>
    <button id="btn_demo">button</button>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
        function cb1(){
            console.log('this is cb1');
        }
        function cb2(){
            console.log('this is cb2');
        }
        $("#btn_demo").on('click',(function(cb1,cb2){
            var counter = 0;
            return function(){
                if(counter % 2 === 0){
                    cb1();
                }else{
                    cb2();
                }
                counter++;
            }
        })(cb1,cb2));
    </script>
</body>
</html>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题