下面是一段鼠标移上为当前元素添加类名,并删除其他兄弟节点的类名的代码
//要添加效果的元素
var classObj = document.getElementsByClassName('sec3-item');
//循环元素并添加事件
for(i=0;i<classObj.length;i++){
classObj[i].addEventListener('mouseenter', function($el){
//其他节点删除act类
siblingsRomoveClassAct($el.target, 'act')
//当前节点添加act类名
$el.target.className += ' act';
},true)
}
function siblingsRomoveClassAct($el, className){
var nodeList = $el.parentNode.children; //父级的子节点
for(var i=0; i<nodeList.length; i++){
//判断是否元素节点 且不是本身 移除要删除的类
if(nodeList[i].nodeType == 1 && nodeList[i] != $el) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
nodeList[i].className = nodeList[i].className.replace(reg, ' '); //移除要删除的类
}
}
}