在jquery 1.11.1版本中,怎么实现jquery 1.9以下版本里面的toggle功能
在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?
在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版本后,该效果就不能实现了。
请问:在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?听说jquery 1.11.1版本有个migrate 功能,但不知道如何用?
------解决思路----------------------
如果你非常喜欢这个功能,有2个办法,一个办法是jquery官网提供的一个版本升级文件。
http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/
另外一个办法是笨办法,就是把原来的那块代码拿出来,写成一个插件。
在线演示。
代码演示:
在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版本后,该效果就不能实现了。
请问:在jquery 1.11.1版本中,如何实现jquery 1.9以下版本里面的toggle功能?听说jquery 1.11.1版本有个migrate 功能,但不知道如何用?
------解决思路----------------------
如果你非常喜欢这个功能,有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>