JS 切换器

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

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

首先就是调用：

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

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