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 のクラスの 1 つが「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 に答える