Question

这适用于IE8，但不适用于IE9，FF8或FF9。看起来似乎应该有所作为。

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

实际行为，当您滚动第二个元素（node [1]）时，它会警告节点[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>

Answer 1

怎么样？

onmouseover="setSelect(this);"

和

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

Answer 2

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>

Answer 3

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

鼠标悬停UL子节点不对

3 个答案: