lychicken
XY前端
采纳率0%
2018-11-22 13:04 阅读 635

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

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条回答 默认 最新

  • m0_37852904 阡路陌人 2018-11-23 02:15

    函数封装

    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');
                }
            }
        }
    }
    
    点赞 1 评论 复制链接分享
  • jslang 天际的海浪 2018-11-22 13:57
    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');
                }
            }
        }
    }
    
    
    点赞 评论 复制链接分享

相关推荐