首页 » JavaScript » JS 切换器

最后更新于 2018年12月30日

制作一个切换器,当用户点击后对应的元素背景色会发生改变,然后再次点击又会变成另一种背景色,然后无限循环。

以前的时候我们做切换器是一个事件执行完毕后创建下一个事件,然后删除本次事件,然后两个事件互相调用,但是对于一些简单的设置就有点麻烦了,所以这里制作一个简单的切换器。

首先就是调用:

 $('#box').tagge(function(){
     $('#box').css('background-color','red');
 },function(){
      $('#box').css('background-color','blue');
 });

tagge()里面有两个function,分别对应第一次点击和第二次点击,然后要一直循环下去。

封装库:

 Base.prototpye.tagge = function() {
   for(var i = 0;i < this.arr.length;i++) {
     var args = arguments;
     var num = 0;
     addEvent(this.arr[i],'click',function(){
         args[num++]();
         if(num >= args.length)  num = 0;
     })
   }
   return this;
 }

arguments里面保存了调用js函数中传入的参数,并以数组的形式保存,然后我们for语句循环搜索到的对应的元素的数组时,给每个对应的元素添加一个click事件,然后在这个事件函数里面将传入的参数运行。

当用户点击后,运行一次事件函数,然后args[0]()运行,然后0++变为1,此时的args下标变为了[1],那么实际上事件还是原来那个,事件里面的匿名函数也是原来那个,改变的是num的值,因为args本身就包含了传入的所有参数,那么只需要改变其对应的数组下标就可以运行对应参数。

然后我们再做个判断,当num的值大于或者等于 args.lenght的时候,num重置为0,然后再次循环。

一个简答的切换器就完成了。

算法优化

我们可以通过算法,将重置num为0的if语句省略。

这里我们可以知道,数组下标是从0开始的,而length是从1开始的,这就导致num的值不能等于或者大于length的值,那么我们就可以使用 求余 算法。

求余算法:

0 % 2 = 0
1 % 2 = 1
2 % 2 = 0

如果左边的数它小于右边的数,求余的值就等于它本身,如果是等于 ,求余得到0,如果是大于,比如3 % 2 求余得到1,4 % 2 = 0;当然这里就不需要知道那么多了。因为无限的循环下去,求余得到的值永远是0 1 0 1 这样的值。

于是 :

 Base.prototpye.tagge = function() {
   for(var i = 0;i < this.arr.length;i++) {
     var args = arguments;
     var num = 0;
     addEvent(this.arr[i],'click',function(){
         args[num++ % args.legth]();
     })
   }
   return this;
 }

这样也可以达到循环的目的,这就是通过算法优化。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao