web.jpeg
几种元素的选中方式
Untitled.gif
image.png
方式一 双重for循环
var oul = document.getElementById("oul");
var list = oul.children;
for(var i = 0; i < list.length; i ++){
list[i].onmouseover = function(){
for(var j = 0 ; j < list.length; j ++){
list[j].className = "";
}
this.className = "current";
}
}
这种方式适用于 少量的元素标签，如果过多稍微会影响性能
方式二 给对象添加属性或者 自定义属性
var oul = document.getElementById("oul");
var list = oul.children;
var lastIndex = 0;
for(var i = 0; i < list.length; i ++){
// 给这个对象 添加属性index属性
list[i].index = i;
list[i].onmouseover = function(){
list[lastIndex].className = "";
this.className = "current";
//更新
lastIndex = this.index;
}
}
方式三 操作元素
var oul = document.getElementById("oul");
var list = oul.children;
var selectObjc = list[0];
for(var i = 0; i < list.length; i++){
list[i].onmouseover = function(){
//清空原来的
selectObjc.className = "";
//选择现在的
this.className = "current";
//把现在的 赋值给原来的 更新
selectObjc = this;
}
}
不管哪种方式:其主要原理都是，清空之前的选中的，选中当前的元素
