项目中经常会遇到一种情况,就是点击切换,比如点击按钮,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方法用于切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
继续阅读与本文标签相同的文章
-
还在关注“宏颜获水”?DuerOS 5.0让你更惊讶
2026-05-19栏目: 教程
-
「云栖大会现场」揭秘“淘富成真”,阿里+富士康如何孵化硬件
2026-05-19栏目: 教程
-
重磅!Apollo 5.0来了,百度变身「老司机」!
2026-05-19栏目: 教程
-
谷歌AI模型ML-Jam激发音乐家创作,人机合作或成未来大势!
2026-05-19栏目: 教程
-
OCP-052考试题库汇总(49)-CUUG内部解答版
2026-05-19栏目: 教程
