项目中经常会遇到一种情况,就是点击切换,比如点击按钮,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方法用于切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
更多专业前端知识,请上 【猿2048】www.mk2048.com