对于JavaScript增删改查对于学习编程后期也是很重要的,
我相信刚刚上手js的,都对于js的数组,字符串方法使用都不够灵活,
特别是for循环的双重嵌套,这一方面我承认我自己也是弱项,
发现上网查嵌套都很少资料 ..所以只能靠自己硬生生写下..
这是我对添加和删除类名简单的做一个封装..
<div id="box" class="warp on"></div>
<script>/* 提示:
1.初始值没有className的时候,拼接不能有空格 ;
2.出现的className不能有重名;
3.比较,有重复的除掉
*/
/*
1.获取初始值className;
2.变量获取:将初始值进行切割;
3.变量获取输入值进行切割;
4.合并初始值和输入值 ;
5.进行查重 遍历合并值
6.倒遍历查重去(不会改变顺序)
*/
调用格式:("类名,ID名,"添加/删除"");
function className(Elements,Cname) {
var Elemens=document.querySelector(Elements),
arr=Elemens.className.split(" "), //将原有的初始className 进行切割
arr1=Cname.split(" "), //将输入的className切割
arr2=arr1.concat(arr); //合并;
for(var i=0; i<arr2.length; i++)
{
for (var j=arr2.length-1; j>i; j--) { //倒遍历
if (arr2[i] == arr2[j]) //如果arr2里面有跟输入的值相同
{
arr2.splice(j,1); //删除
}
}
}
Elemens.className=arr2.join(" "); //将排除的值赋予拼接输出;
}
function removeClass(Elements,Cname) {
var Elemens=document.querySelector(Elements),
arr=Elemens.className.split(" ");
arr1=Cname.split(" ");
for (var i=0; i<arr1.length; i++)
{
for (var j=0; j<arr.length; j++)
{
if (arr1[i]==arr[j])
{
arr.splice(j,1);
}
}
}
Elemens.className=arr.join(" ");
}