JS 切换器

55 0

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

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

首先就是调用:

 $('#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;
 }

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

0
  • 本文分类:JavaScript
  • 本文标签:切换器求余算法
  • 流行热度:已超过 55 人围观了本文
  • 发布日期:2018年12月30日 - 21时10分07秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码