                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

为啥这样不行捏？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>toggle()方法绑定多个函数</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h3>toggle()方法绑定多个函数</h3>
        <input id="btntest" type="button" value="点一下我" />
        <div>我是动态显示的</div>
        
        <script type="text/javascript">
            $(function () {
                $("#btntest").bind("click", function () {
                    $("div").toggle(function(){
                        $(this).hide();
                    }
                    function(){
                        $(this).show();
                    }
                    );
                })
            });
        </script>
    </body>
</html>

Bill0123

2015-09-23

源自：jQuery基础课程 6-4

关注问题我要回答

495

操作

收起

4 回答

Perona
2015-09-23

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：

$(selector).toggle(fun1(),fun2(),funN(),...)

其中，fun1，fun2就是多个函数的名称。（记住，绑定的函数与函数之间应该用逗号隔开。）

那么我们这里其实是没有必要去绑定click事件的。即这一行是无必要的

 $("#btntest").bind("click", function () {

this指代的是当前对象，这里我们是要触发#btntest元素的click事件，但是作用是在div元素上，所以这里不能用this。

咱们整理一下思路，这里一开始要确定在文档载入完毕执行，那么就应该是

$(function(){ }

第二步，给#btntest元素click事件中绑定两个函数（一般的是定义匿名函数），那么现在的jq应该是酱紫的

$(function () {
    $("#btntest").toggle(function(){},function(){})
 });

这2个函数分别控制元素的显示和隐藏，这里要动态显示的是div元素，即匿名函数里取的元素应该是$(div)，显示和隐藏的方法是什么？是不是就是show()和hide()。那么完整的jq代码就是

$(function () {
            $("#btntest").toggle(
                    function(){
                        $("div").hide();
                        },
                    function(){
                        $("div").show();
            })
        });

大功告成，哦也~~~

0 回复有任何疑惑可以回复我~

收起回答

Bill0123 提问者

在click事件中绑定的方法 $("#btntest").bind("click", function () {这个都不用写了是不是呀？这种方法还有那些呢？

2015-09-23 回复有任何疑惑可以回复我~

Perona 回复 Bill0123 提问者

挺多的呀，如one()、live()、delegate()等等。

2015-09-23 回复有任何疑惑可以回复我~

犀利一下下
2015-11-29

思路清晰，讲解细致，好评！

0 回复有任何疑惑可以回复我~

收起回答

慕码人3910529
2015-10-12

mark

0 回复有任何疑惑可以回复我~

收起回答

Perona
2015-09-23

刚刚看一下，发现这个toggle有点变态，它可以做事件来处理，也可以做方法来处理。如果用toggle做方法，本身就有隐藏和显示的效果，建议不要用hide()和show()来处理，直接用css得了，免得混淆。而且我发现用hide()和show()谷歌不买单。

参考代码

<script type="text/javascript">
    $(function () {
        $("#btntest").toggle(
                function(){
                    $("div").css("display","none");
                },
                function(){
                    $("div").css("display","block");
                })
    });
</script>

当然，你也可以直接把toggle当方法来处理。即给#btntest元素绑定个click事件，用toggle()给div做显示隐藏效果。

参考代码

 <script type="text/javascript">
        $(function () {
            $("#btntest").bind("click", function () {
                $("div").toggle();
            })
        });
  </script>

5 回复有任何疑惑可以回复我~

收起回答

慕运维2603834

不错讲的很好！！思路很清晰！棒棒哒！！！32个赞

2015-10-27 回复有任何疑惑可以回复我~

Perona 回复慕运维2603834

[害羞]

2015-10-27 回复有任何疑惑可以回复我~