toggleClass很好，如果我只有兩種演示風格我想使用，但很多時候我有兩個以上的狀態我想要使用。jQuery：通過一組類來旋轉元素
例如，如果我想通過三類旋轉：
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方法或插件來做到這一點？
，把它們放進一個數組：
var arr = ['A', 'B', 'C'];
var i = 0;
然後在處理程序：
i = ++i % arr.length;
$(this).toggleClass(this.className + ' ' + arr[ i ]);
採用this.className假定有沒有適用於該元素的其他類。如果有中號
$(this).removeClass(arr[ i ]);
i = ++i % arr.length;
$(this).addClass(arr[ i ]);
：
如果有可能是其它類，使用此AY是其他元素，每個人都需要自己的狀態，你可以使用一個閉合的獨特i與每個元素相關聯：
$('div').each(function() {
var i = 0;
$(this).click(function() {
$(this).removeClass(arr[ i ]);
i = ++i % arr.length;
$(this).addClass(arr[ i ]);
});
});
這個插件代碼將通過類之間旋轉（然而很多有（2-n）。如果在對象上找不到任何傳遞的類，則設置第一個類。
$.fn.rotateClass(/* pass multiple class names here */) {
for (var i = 0; i < arguments.length; i++) {
if (this.hasClass(arguments[i])) {
this.removeClass(arguments[i]));
i++;
if (i >= arguments.length) {
i = 0;
}
this.addClass(arguments[i]);
return(this);
}
}
// none found so set the first class
if (arguments.length > 0) {
this.addClass(arguments[0]);
}
return(this);
}
此版本的代碼假定您將相同的類應用於jQuery對象中的所有DOM對象，並且它們都具有相同的狀態。它可以擴展爲單獨處理jQuery對象中的每個DOM對象，並在需要時分別旋轉每個DOM對象。
，您仍然可以使用toggleClass並把它傳遞一個函數：
$(this).toggleClass(function() {
if ($(this).hasClass('red')) {
return 'green red';
}
if ($(this).hasClass('green')) {
return 'blue green';
}
if ($(this).hasClass('blue')) {
return 'red blue';
}
});
不是最簡單的代碼，雖然維護，所以它可能會更好地把它包在一個插件。
http://jsbin.com/inaduy/edit#javascript,html,live
現在在做一個非常基本的插件（即需要一點驗證）。您只需傳遞一個包含要交換的類對象的數組。
var classArray = [{current: 'red', next:'green'}, {current:'green', next:'blue'}, {current:'blue', next:'red'}];
$('#hello').click(function() {
$(this).toggleRotate(classArray);
});
(function($) {
$.fn.toggleRotate = function(classes) {
return $(this).toggleClass(function() {
var l = classes.length;
for (var i = 0; i < l; i++) {
if ($(this).hasClass(classes[i].current)) {
return classes[i].current + ' ' + classes[i].next;
}
}
// If it makes it here return the first current value
return classes[0].current;
});
};
})(jQuery);
我目前的解決方案：
$.fn.mapClasses = function(mapping){
return this.each(function(){
this.className = this.className.split(/\s+/).map(function(klass){
return mapping[klass] || klass
}).join(' ');
});
};
$.fn.rotateClasses(){
var mapping = {};
var prev = arguments[0];
for (var i = arguments.length - 1; i >= 0; i--){
mapping[ arguments[i] ] = prev;
prev = arguments[i];
}
return this.mapClasses(mapping);
};
這是我在它的嘗試。
$.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'的索引，這就是我們想要的，因此模數每次都會給我們正確的索引。
下面是我用什麼：
$.fn.rotateClass = function(classes) {
var $set = this.each(function() {
var $this = $(this);
var index = (($this.data("currentClassIndex")) ? $this.data("currentClassIndex") : 0) % classes.length;
$this.removeClass(classes.join(" "))
.addClass(classes[index])
.data("currentClassIndex", ++index);
});
return $set;
}
沒有for循環，沒有hasClass電話，有一組元素，非常緊湊，性能良好的兼容。
用法：
$("#randomDiv").rotateClass(["classA", "classB", "classC", "classD"]);