鼠标悬停UL子节点不正确

Mouseover UL Child Nodes Not Right

本文关键字：不正确 子节点 UL 悬停 鼠标      更新时间：2023-09-26

这适用于IE8，但不适用于IE9、FF8或FF9。不过，这似乎是应该奏效的。

预期行为：当你滚动LI时，它应该弹出一个带有该节点的LI id的警报。

实际行为是，当您滚动到第二个元素（node[1]）上时，它会提醒node[0]的id。当您在节点[0]或节点[2]上滚动时，警报会给出一个未定义的。

有人能帮我弄清楚吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.outputUl{
    margin: 0;
    padding: 0px;
    list-style: none;
    width: 200px;   
}
.outputLi {
}
.outputLiSelect {
    background-color: #069; 
    cursor: pointer;
}
</style>
</head>
<body>
<ul class="outputUl" id="meganFox">
    <li id="li1"
        class="outputLi" 
        onmouseover="setSelect(1);">Frank</li>
    <li id="li2"
        class="outputLi" 
        onmouseover="setSelect(2);">Bob</li>
    <li id="li3"
        class="outputLi" 
        onmouseover="setSelect(3);">Jeff</li>
</ul>
<script language="javascript">
function setSelect( num ){
    var nodes = document.getElementById('meganFox').childNodes;
    num = num - 1;
    nodes[num].className = 'outputLiSelect';
    alert( 'id '+nodes[num].id );
}
</script>
</body>
</html>

childNodes集合在某些浏览器上包含空文本节点。您需要循环遍历它们，并且只考虑nodeType=1（HTML元素）的节点。

我已经使用了上面的代码，并添加了一个新的方法getChildElements()，它就是这样做的。试试看它是否能解决问题。

也就是说，Eugen Rieck的解决方案更优雅——他将受影响的元素直接传递给setSelect方法，而不是篡改索引。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    .outputUl { margin: 0; padding: 0px; list-style: none; width: 200px; }
    .outputLi {  }
    .outputLiSelect { background-color: #069; cursor: pointer; }
</style>
</head>
<body>
    <ul class="outputUl" id="meganFox">
        <li id="li1" class="outputLi" onmouseover="setSelect(1);">Frank</li>
        <li id="li2" class="outputLi" onmouseover="setSelect(2);">Bob</li>
        <li id="li3" class="outputLi" onmouseover="setSelect(3);">Jeff</li>
    </ul>
    <script language="javascript">
        function setSelect( num )
        {
            var nodes = getChildElements(document.getElementById('meganFox'));
            num = num - 1;
            nodes[num].className = 'outputLiSelect';
            alert( 'id '+nodes[num].id );
        }
        function getChildElements(parentNode)
        {
            var list = [];
            if (parentNode.childNodes)
            {
                var nodes = parentNode.childNodes;
                for (var i = 0, len = nodes.length; i < len; i++)
                {
                    // only include nodes that are HTML elements
                    if (nodes[i].nodeType == 1)
                        list.push(nodes[i]);
                }
            }
            return list;
        }
    </script>
</body>
</html>

怎么样

onmouseover="setSelect(this);"

和

function setSelect(node) {
  node.className='outputLiSelect';
  alert('id '+node.id);
}

在您的代码中。节点从1开始。所以不要使用num=num-1；

相关文章：