javascript - jquery的.toggle()方法只能用于元素的显示与隐藏吗？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

PHPz 2017-04-11 09:46:27

[JavaScript讨论组]

570

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

我写的代码是这个样子的：

效果是：

1.页面刷新之后，控制台打印“11”，此时根本没有点击；
2.点击按钮没有反应，请问到底是怎么回事？怎么写？

PHPz

学习是最好的投资！

全部回复(6)

大家讲道理2017-04-11 09:48:27 6楼

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

赞 +0

添加回复

迷茫2017-04-11 09:48:27 5楼

可以实现的哦！
但是我发现和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>

赞 +0

添加回复

黄舟2017-04-11 09:48:27 4楼

貌似是的。。。

赞 +0

添加回复

PHP中文网2017-04-11 09:48:27 3楼

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

赞 +0

添加回复

PHP中文网2017-04-11 09:48:27 2楼

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');
});

赞 +0

添加回复

大家讲道理2017-04-11 09:48:27 1楼

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

<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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>