这两个鼠标事件有大部分代码重复,怎么才能合并重复代码呢?

window.onload = function(){
var hdList = $('.hd-list')[0],
hdLi = $('.hd-list>li');
hdList.onmouseover = function(e){
var ev = e || window.event,
target = ev.target || ev.srcElement,
tagName = target.nodeName.toLowerCase();
if(tagName!='ul'){
while (target.nodeName.toLowerCase()!='li'){
target = target.parentNode;
}
clearBlankNodes(target);
var childNodes = target.childNodes;
childNodes[0].classList.add('green-text');
if(childNodes.length>1){
childNodes[1].classList.remove('dis-hide');
}
}
}
hdList.onmouseout = function(e){
var ev = e || window.event,
target = ev.target || ev.srcElement,
tagName = target.nodeName.toLowerCase();
if(tagName!='ul'){
while (target.nodeName.toLowerCase()!='li'){
target = target.parentNode;
}
clearBlankNodes(target);
var childNodes = target.childNodes;
childNodes[0].classList.remove('green-text');
if(childNodes.length>1){
childNodes[1].classList.add('dis-hide');
}
}
}
}

2个回答

函数封装

window.onload = function(){
    var hdList = $('.hd-list')[0],
    hdLi = $('.hd-list>li');
    hdList.onmouseover = function(e){
        hover(e,true);
    }
    hdList.onmouseout = function(e){
        hover(e,false);
    }
}

function hover (e,isTrue) {
    var ev = e || window.event,
    target = ev.target || ev.srcElement,
    tagName = target.nodeName.toLowerCase();
    if(tagName!='ul'){
        while (target.nodeName.toLowerCase()!='li'){
            target = target.parentNode;
        }
        clearBlankNodes(target);
        var childNodes = target.childNodes;
        if (isTrue) {
            childNodes[0].classList.add('green-text');
        }else {
            childNodes[0].classList.remove('green-text');
        }
        if(childNodes.length>1){
            if (isTrue) {
                childNodes[1].classList.remove('dis-hide');
            }else {
                childNodes[1].classList.add('dis-hide');
            }
        }
    }
}
window.onload = function() {
    var hdList = $('.hd-list')[0],
        hdLi = $('.hd-list>li');
    hdList.onmouseover = function(e) {
        hover(e,true);
    }
    hdList.onmouseout = function(e) {
        hover(e,false);
    }
    function hover(e,flag) {
        var ev = e || window.event,
            target = ev.target || ev.srcElement,
            tagName = target.nodeName.toLowerCase();
        if (tagName != 'ul') {
            while (target.nodeName.toLowerCase() != 'li') {
                target = target.parentNode;
            }
            clearBlankNodes(target);
            var childNodes = target.childNodes;
            if (flag)
                childNodes[0].classList.add('green-text');
            else
                childNodes[0].classList.remove('green-text');
            if (childNodes.length > 1) {
                if (flag)
                    childNodes[1].classList.add('dis-hide');
                else
                    childNodes[1].classList.remove('dis-hide');
            }
        }
    }
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐