• jQuery toggle() 方法与实例以及代替方法。


    看《jQeury 权威指南》时看到这个toggle()方法。因为之前在慕课网学习接触过。发现两者讲的有细微的不同

    以隐藏/显示目标元素效果为例,慕课网是这样讲解的

    $("#clickId").toggle( 
    
    function(){$('#divId').hide();}, //方法之间以逗号隔开
    
    function(){$('#divId').show();} 
    
    ); 

    点击ID名为clickId的按钮,第一次会执行第一个function来隐藏ID名为divId的块。第二次点击会显示。第三次点击再次执行隐藏,以此类推。

    同样一个功能,而《jQeury 权威指南》中是这样讲解用法的。

    $("#clickId").click(function() {
       $("divId").toggle(); 
    })

    使用toggle()的无参数方法来

    同样的隐藏/显示目标元素的效果,《jQuery 权威指南》的处理方式显得更加简洁。使用无参方法时,只有2种状态。但是当需要切换2种以上的状态时,就只能使用慕课网的方法了。下面讲解toggle()方法可以实现多函数绑定

    <body>
            
            <input id="btntest" type="button" value="点一下我" />
            <div>你好,请选择佳丽</div>
            
            <script type="text/javascript">
                $(function(){
                    $("#btntest").toggle(
                        function(){
                            $("div").html("1号范冰冰");
                        },function(){
                            $("div").html("2号李冰冰");
                        },function() {
                            $("div").html("3号杨幂");
                        },function() {
                            $("div").html("4号姚晨");
                        }
                        )
                    })
         </script>
        </body>

    以下是运行结果。可见toggle()方法可以绑定多个函数,使用相当灵活。  

    toggle有3种调参的方法。上面讲了第一种无参使用方法,下面是第二种

    toggle(switch)

    switch是布尔类型的  数值是true或者false (若使用布尔值。则无法使用第三种speed参数方法)

    var intI = 0;
    var blnA = intI > 1; //获取逻辑值false;
    $("img").toggle(blnA);

     此时的blnA值是false。所以他能将"img"图片隐藏。

    第三种是

    $(selector).toggle(speed,callback)

    speed是触发事件后执行的事件,可能的值:

    • 毫秒 (比如 1000 也就是1秒)
    • "slow"(0.6秒)
    • "normal"(0.4秒)
    • "fast"(0.2秒) 

      在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。也就是动画效果了

      callback是整个toggle()方法执行完之后触发的事件,和上面的多函数绑定是不同的,一定要设置speed参数才能使用callback参数。

    在1.8.2及之前的版本可以使用toggle,但在1.9版本之后就将其删除了(挺好用的,不知道为什么删除了=.=!)

    那么就要用手动方式来代替他了,或者使用过渡版本的jQuery,下面是手动方式。

    //使用toggle方法时
    $('button').click(function(){$("img").toggle();}) //手动实现toggle()方法 $('button').click(function(){ if($("img").is(":hidden")){ $("img").show(); }else{ $("img").hide(); } })

    部分数据参考w3school

    http://www.w3school.com.cn/jquery/effect_toggle.asp

  • 相关阅读:
    Linux下安装confluence汉化破解版
    某种可以解决一切问题的方法
    普通平衡树(treap)
    文艺平衡树(splay模板)
    [CQOI2015]任务查询系统
    [NOIP2016]天天爱跑步
    NOI2018_Day1_T1_归程
    Picture
    bzoj3524 Couriers
    bzoj2588 counting on a tree
  • 原文地址:https://www.cnblogs.com/lijinwen/p/5437031.html
Copyright © 2020-2023  润新知