如何在javascript的for循环中为所有相同标签添加onclick事件

来源:百度知道 编辑:UC知道 时间:2024/06/14 09:23:25
我想实现的一个功能是点击一个主菜单可以隐藏或显示下面的字菜单
我下面的代码有一个错误就是不管是点击主菜单1还是主菜单2,都只能隐藏或显示主菜单2的字菜单
小弟是javascript的初学者,希望高手能指点指点,小弟感激不尽,以下是代码部分

//------------------menu.html-------------------//

<body onload="init()">
<ul><a>主菜单1</a>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
<ul><a>主菜单2</a>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
</ul>
</body>

//------------------menu.js--------------------//

function init() {
//找到所有的ul标签节点
var ulNodes = document.getElementsByTagName("ul");

//找到所有的ul标签下的a标签节点
for(var k = 0; k < ulNodes.length; k++) {
var ulNode = ulNodes[k];
var aNodes = ulNode.getElementsByTagName("a");

//为所有的

当用户点击a标签的时候将执行
aNode.onclick = function () { 后面的语句,此时程序会寻找aNode的值,然而在你的匿名函数中并没有指明这个值于是程序开始尝试往上层函数找,这时遇到var aNode = aNodes[i]; 这个语句,而此时的i已经完成for循环于是i的值为for循环后的最后一个值,这就是为什么你老是只能隐藏最后一个菜单的原因,可以使用JavaScript的闭包解决这个问题:
下面是在你的源程序基础上使用闭包修改后的结果,此外你的aNode.open = false; 逻辑有误一并修改:
<!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" />
<title>无标题文档</title>
<script type="text/javascript">
function init() {
var ulNodes = document.getElementsByTagName("ul");
for