大佬教程收集整理的这篇文章主要介绍了如何改进这个jQuery切换方法,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> </head> <style type="text/css"> .format1{ BACkground: red; } .format2{ BACkground: yellow; } .format3{ BACkground: blue; } </style> <div id="div-toggle">Click here to toggle</div> <script language="javascript"> var click = 0; $('#div-toggle').toggle( function(){ var el = $('#div-toggle'); el.addClass('format1'); el.html('No. of clicks: ' + click++); },function(){ var el = $('#div-toggle'); el.removeClass('format1'); el.addClass('format2'); el.html('No. of clicks: ' + click++); },function(){ var el = $('#div-toggle'); el.removeClass('format2'); el.addClass('format3'); el.html('No. of clicks: ' + click++); } ); </script> </html>
var click = 0; // keep track of how many times user has clicked // Generates an event handler that will remove oldClass,add newClass,increment // click,and update the element text whenever it is called. function ClassSwapper(oldClass,newClass) { return function() { $(this) .removeClass(oldClass) .addClass(newClass) .html('No. of clicks: ' + ++click); }; } // generate three event handlers for toggle,such that the three // format classes are cycled. $('#div-toggle').toggle( ClassSwapper('format3','format1'),ClassSwapper('format1','format2'),ClassSwapper('format2','format3') );
请注意,toggle()
将处理程序从最后一个返回到第一个,因此您可能希望第一个处理程序删除最后一个添加的类…
由于你要保留一个计数器,你可以完全避免切换(),并组合计数器,循环遍历的类列表,以及click
事件处理程序:
// number of times user has clicked,and also index of *next* class to use var click = 0; $("#div-toggle").click(function() { // classes to cycle through var classes = ['format1','format2','format3']; // removes prevIoUs class,adds new one. // note that,for brevity,this takes advantage of // a detail specific to JavaScript arrays: negative indexes are // interpreted as property names,so the first time this is called,// removeClass() will be passed the value of classes["-1"] (which will // return undefined) and will as a result do nothing. $(this) .removeClass(classes[(click-1)%classes.length]) .addClass(classes[(click)%classes.length]) .html('No. of clicks: ' + ++click); });
以上是大佬教程为你收集整理的如何改进这个jQuery切换方法全部内容,希望文章能够帮你解决如何改进这个jQuery切换方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。