求大神进来指点一下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

最明显的两个问题：HTML文档中存在相同的id，在同一个页面中id必须是唯一的，不能重复；for循环为什么还要嵌套一层for循环？多此一举，而且两个for循环用了同一个局部变量，这是不合理的。建议还是先夯实基础知识吧，结合理论做些实践练习。