zoukankan      html  css  js  c++  java
  • jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1。需要自定义jQuery方法toggle。

         // toggle方法
            $.fn.toggle = function( fn, fn2 ) {
                let args = arguments,guid = fn.guid || $.guid++,i=0,
                    toggler = function( event ) {
                        let lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
                        $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
                        event.preventDefault();
                        return args[ lastToggle ].apply( this, arguments ) || false;
                    };
                toggler.guid = guid;
                while ( i < args.length ) {
                    args[ i++ ].guid = guid;
                }
                return this.click( toggler );
            };
            $("#fullScreen").toggle(function(){
                $(this).css("background","url('resources/images/zoom_control.png') no-repeat 11px -170px");
            },function(){
                $(this).css("background","url('resources/images/zoom_control.png') no-repeat 10px 11px");
            });

    注意不要与jQuery中默认的toggle方法搞混淆,默认的toggle方法用于切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

  • 相关阅读:
    hdu 6049 Sdjpx Is Happy
    L2-012. 关于堆的判断
    L2-010. 排座位
    L2-009. 抢红包
    L2-007. 家庭房产
    L2-008. 最长对称子串
    L2-011. 玩转二叉树
    l2-006 树的遍历
    l2-005
    l1-20 帅到没朋友
  • 原文地址:https://www.cnblogs.com/zoeeying/p/9953482.html
Copyright © 2011-2022 走看看