jQuery:通过一组类旋转元素

Question

toggleClass 如果我只想使用两种演示文稿样式，那么它非常有用，但很多时候我想要使用两种以上的状态。

例如，如果我想轮换三个类别:

if ($(this).hasClass("A"))
   $(this).removeClass("A").addClass("B");
else if ($(this).hasClass("B"))
   $(this).removeClass("B").addClass("C");
else if ($(this).hasClass("C"))
   $(this).removeClass("C").addClass("A");

我想要一个简单的方法来为我做到这一点，例如:

$(this).rotateClass('A', 'B', 'C');

是否有现有的 jQuery 方法或插件可以执行此操作？

Answer 1

这是我的尝试。

  $.fn.rotate= function( classes ) {
      $element = this;  // element the rotate is being applied to
      for( var i = 0; i <  classes.length; i++ ){   // look through the classes array
          if( $element.hasClass( classes[i] ) ){  // check if current element has the class specified in the array 
              $element.removeClass( classes[i] );  // if it does then remove the class 
              $element.addClass( classes[ ++i % classes.length ] );  
              return $element; // return the current element so other functions can be applied to it. 
           }
      }
  }

您可以通过在元素上调用 .rotate 并传入要旋转的类数组来使用它。

这是一个interactive演示。我刚刚添加了动画以表明您可以在旋转完成后将其他 jQuery 函数应用于该元素。

 $('#test').rotate(['A','B','C']); 

我们使用模运算符的原因是，如果 i > 数组的长度，那么我们需要正确的索引。例如，类数组为 ['A','B','C']，如果元素上的当前类为 'C'，则当前类的索引为 2(数组基于 0 索引)，那么如果我们递增 2 + 1 = 3 以获得我们想要将其旋转到的类，但我们在索引 3 处没有任何类，因此 3 % 3 = 0 这是“A”的索引，这就是我们想要的，因此模数每次都会给我们带来正确的索引。