之前自己用原生的js添加类名和移除类名，用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块，今天想起自己也来搞一下添加类名和移除类名，，，不动手不知道，敲起来遇到不少bug。主要还是起初考虑的不够周到，不过调试工具真是个‘宝’；
这里直接附上我的代码了：
//添加类（可以一次添加多个类名）
function addClass() {
var arg = Array.prototype.slice.call(arguments);
var dom = arg[0]; //取得dom
var className = arg.slice(1); //取得要添加的类名（数组形式）
var doms =document.querySelectorAll(dom); //获取所有符合的dom成员
for (var i = 0; i < doms.length;i++) {
//为了避免当第一次设置类名且以前没有类名，会出现第一个有空格的现象
if (doms[i].className) {
//如果之前有类名了
addOne(doms[i]);
} else {
//首次添加类名
firstaddOne(doms[i]);
}
}
function addOne(dom) {
for (var j = 0; j < className.length; j++) {
var itemName = dom.className;
var itemNames = [].push.call([],itemName);
console.log(typeof itemNames);
dom.className = dom.className + ' ' + className[j];
}
}
function firstaddOne(dom) {
for (var j = 0; j < className.length; j++) {
dom.className = dom.className + className[j];
}
}
}
//移除类
function removeClass() {
var arg = Array.prototype.slice.call(arguments);
var dom = arg[0]; //取得dom
var className = arg.slice(1); //取得要删除的类名（数组形式）
var doms = document.querySelectorAll(dom); //获取所有符合的dom成员
//遍历dom
for(var i=0;i<doms.length;i++){
var getAttr = doms[i].getAttribute('class');
var arr1 = getAttr.split(' ');
//双重循环判断删除的类名是否与已有的类名一样
for(var j=0;j<arr1.length;j++){
for(var k=0;k<className.length;k++){
if(arr1[j]===className[k]){
arr1.splice(j,1);
console.log(arr1.length);
j--;
break;
}
}
}
//一样--〉连同类名属性删除
if(arr1.length==0){
doms[i].removeAttribute('class');
}else{
//否则删除要删除的类名
removeOne(doms[i]);
}
}
function removeOne(dom){
for (var j = 0; j < className.length; j++) {
var getAttr = doms[i].getAttribute('class');
var arr1 = getAttr.split(' ');
if(className[0]===arr1[0]){
dom.className = dom.className.replace(className[j], '');
}else{
dom.className = dom.className.replace(' ' + className[j], '');
}
}
}
}
快乐的学习，才能快速的成长^_^
