欢迎光临
我们一直在努力

在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?

jQuery 版本之间有区别。比如1.9版本对于 live(),die(),toggle(),sub(),$.browser 等等都已经不支持了。 在不改变你网站代码的同时,要使用 1.9 之后的版本,你需要使用 jQuery migrate(转移、过度),详见 http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/ (英文)。 所以jquery-migrate-1.2.1.js就是一个过渡插件 让你在原来代码上升级jquery 不用修改代码用的
另外一个办法是笨办法,就是把原来的那块代码拿出来,写成一个插件。

    $.fn.toggle = function( fn ) {
        // Save reference to arguments for access in closure
        var args = arguments,
                guid = fn.guid || jQuery.guid++,
                i = 0,
                toggler = function( event ) {
                    // Figure out which function to execute
                    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
                    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
 
                    // Make sure that clicks stop
                    event.preventDefault();
 
                    // and execute the function
                    return args[ lastToggle ].apply( this, arguments ) || false;
                };
 
        // link all the functions, so any of them can unbind this click handler
        toggler.guid = guid;
        while ( i < args.length ) {
            args[ i++ ].guid = guid;
        }
 
        return this.click( toggler );
    }

 

在jquery 1.9以下版本里面,可以用toggle来实现,点击一次按钮,背景颜色就切换一次的效果,代码如下:

$(document).ready(function(){
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});

<button>请点击这里,来切换不同的背景颜色</button>

可是,当jquery.js文件变成1.11.1版本后,该效果就不能实现了。

如果你非常喜欢这个功能,有2个办法,一个办法是jquery官网提供的一个版本升级文件。
http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/
代码演示:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button>test click me</button>
<script>
    $(document).ready(function(){
        $("button").toggle(function(){
            $("body").css("background-color", "green");
        }, function(){
            $("body").css("background-color", "red");
        }, function(){
            $("body").css("background-color", "yellow");
        });
    });
 
    $.fn.toggle = function( fn ) {
        // Save reference to arguments for access in closure
        var args = arguments,
                guid = fn.guid || jQuery.guid++,
                i = 0,
                toggler = function( event ) {
                    // Figure out which function to execute
                    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
                    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
 
                    // Make sure that clicks stop
                    event.preventDefault();
 
                    // and execute the function
                    return args[ lastToggle ].apply( this, arguments ) || false;
                };
 
        // link all the functions, so any of them can unbind this click handler
        toggler.guid = guid;
        while ( i < args.length ) {
            args[ i++ ].guid = guid;
        }
 
        return this.click( toggler );
    }
</script>
</body>
</html>

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址