JQuery在两个或者多个不同样式Calss之间切换

在项目中，根据元素个数，进行两个或多个切换样式。在多个样式表之间切换需要将原来的样式全部清除，否则样式会叠加。

css

.red{
color: red;
}
.blue{
color: blue;
}
.black{
color: black;
}

html

<ul id="element">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

js

changeStyle();
function changeStyle(){
var toggleID=$("#element");
var liLength=toggleID.find("li").length;
//将样式表保存在数组
var liSts=new Array('red','blue','black');
if(liLength<=3){
toggleStyle(toggleID,liSts,"red");
}else if(liLength>3&&liLength<=6){
toggleStyle(toggleID,liSts,"blue");
}else{
toggleStyle(toggleID,liSts,"black");
}
}
function toggleStyle(element,arr,stID){
//遍历样式表，清空样式
for(var i=0;i<arr.length;i++){
if(arr[i]!=stID){
//若已存在
if(element.hasClass(arr[i])){
//移除
element.removeClass(arr[i]);
}
}
}
element.toggleClass(stID);
}

根据li数量显示不同样式

li*3时，添加

red

样式



li*4时，添加

blue

样式



li*8时，添加

black

样式