求大神进来指点一下js问题。

Question

<script> window.onload = function() { var oUl = document.getElementById('list'); var aLink = oUl.getElementsByTagName('a'); for (var i = 0; i < aLink.length; i++) { aLink[i].onclick = function() { var oI = this.parentNode.getElementsByTagName('i')[0]; for (var i = 0; i < aLink.length; i++) { aLink[i].parentNode.getElementsByTagName('i')[0].style.display = 'none'; aLink[i].className = ''; } oI.style.display = 'block'; this.className = 'active'; } } } </script><div> <ul class="menu" id="list"> <li><a href="#">金色</a><i>已选中</i></li> <li><a href="#">银色</a><i>已选中</i></li> <li><a href="#">黑色</a><i>已选中</i></li> </ul> <ul class="menu" id="list"> <li><a href="#">金</a><i>已选中</i></li> <li><a href="#">银</a><i>已选中</i></li> <li><a href="#">黑</a><i>已选中</i></li> </ul> </div>实现点击效果，但是现在只能读到上面的list。怎么才能让个list都被读到。

Answer 1

最明显的两个问题：

1. HTML文档中存在相同的id，在同一个页面中id必须是唯一的，不能重复；

2. for循环为什么还要嵌套一层for循环？多此一举，而且两个for循环用了同一个局部变量，这是不合理的。

建议还是先夯实基础知识吧，结合理论做些实践练习。