2

在 Html 文件中，我有很多这样的语句：

<li class="menu"><a href="#">1st menu</a></li>

在javascript文件中，我有这样的代码：

1. function onload()
2. {
3.  var lists=document.getElementsByTagName("li");
4.  for(var i=0;i<lists.length;i++){
5.      if(lists[i].className=="menu"){
6.          lists[i].a.onclick=genmenu;
7.      }
8.  }
9. }

function genmenu(){
    alert("this is an alert");
    return false;
}

问题是，如果我点击链接“第一个菜单”，它不会显示警报。但是，如果我更改第 6 行并编写：

lists[i].onclick=genmenu;

然后此链接有效并显示警报。

我的问题，为什么第 6 行 (lists[i].a.onclick=genmenu;) 不起作用？这不是一个有效的代码吗？

4

3 回答 3

3

您不能将嵌套元素作为另一个元素的成员来访问：

lists[i].a

这是在寻找list[i]名称为的元素的成员a- 它不是在其中寻找锚点。如果你想要锚，你会写：

list[i].getElementsByTagName("a")[0];
于 2012-05-26T05:03:30.980 回答
1

a不是 的属性li，它是一个嵌套标记。你必须使用

lists[i].getElementsByTagName('a')[0];

作为旁注，请注意，if(lists[i].className=="menu")因为如果您的 li 的课程之一是“menu otherClass”，它将不再起作用。jQuery 有一个很好的方法来处理这个问题：hasClass() 但如果你不使用 jQuery，编写类似的东西会很容易。

于 2012-05-26T05:03:01.957 回答
0

在现代浏览器上，您的代码可以更简单、更高效：

function onload () {
   var links = document.querySelectorAll ('li.menu a[href]');
   for (var i= links.length; i--;) {
     links[i].addEventListener ('click', genmenu, false);
   }
}

function genmenu () {
    alert ("this is an alert");
    return false;
}

有关详细信息，请参阅querySelectorAll.

于 2012-05-26T06:12:01.743 回答