在查看您的代码并意识到您要执行的操作后,我认为您的错误是 using substr
where you should be using indexOf
. 这是更新的行:
if (itemsContainer.getAttribute('class').indexOf('hovered') != -1)
更多细节:
您实际上在做的是使用
substr
带有字符串值的
start
索引。不确定结果是什么,但显然不是 -1,因为条件每次都返回 true,导致下一个元素每次都悬停,一直悬停到列表的底部。有了
break
语句,它在第一个元素处执行 if 语句(导致第二个元素“悬停”),然后退出。
在更正您的代码后,我会将break
语句保留在那里,以便循环在找到匹配项后停止,并且不会不必要地循环遍历其余项目。
编辑:
我还在您的代码中发现了其他几个问题。这是一个至少在 IE 和 FF 中适用于我的示例(尚未在 Safari、Opera 或 Chrome 中测试):
<html>
<head>
<style type="text/css">
.hovered
{
color:red;
}
</style>
<script type="text/JavaScript">
function move(event)
{
var itemsContainer = document.getElementById('cities-drop');
if (event.keyCode == 40 && itemsContainer.style.display == 'block')
{
if (event.preventDefault)
event.preventDefault();
if (event.cancelBubble)
event.cancelBubble();
if (event.stopImmediatePropagation)
event.stopImmediatePropagation();
for (var i=0; i<itemsContainer.children.length-1; i++)
{
if (itemsContainer.children[i].className.indexOf('hovered') != -1)
{
itemsContainer.children[i].className = "";
itemsContainer.children[i+1].className = "hovered";
break;
}
}
}
};
</script>
</head>
<body onkeydown="move(event)">
<div id="cities-drop" style="display:block;">
<p class="hovered">Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
<p>Item 6</p>
<p>Item 7</p>
</div>
</body>
</html>
详细信息:对我来说,在 IE9 中,该函数从未被调用过。相反,我只是将其设为常规函数并向标签添加了一个
onkeydown
事件。
body
接下来,为了跨浏览器的兼容性,您应该在使用它之前检查以确保它event.preventDefault
存在。我在 IE 中遇到 JS 错误。
在你的 if 语句中,你有itemsContainer.getAttribute('class')
. 首先,您需要使用itemsContainer.children[i]
. 其次,.getAttribute('class')
在 IE 中对我不起作用,所以我将其切换为.className
.
最后,itemsContainer.children[i].nextSibling
对我不起作用,但它很简单,只需将其更改itemsContainer.children[i+1]
为获取下一个兄弟姐妹。