小javascript解決方案需要：這行是一個有效的代碼嗎？

在HTML文件中，我有很多的語句是這樣的：小javascript解決方案需要：這行是一個有效的代碼嗎？

<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（列表[I] .a.onclick = GENMENU）一點兒也不工作？這不是一個有效的代碼嗎？

來源

2012-05-26 Md Kowsar Hossain

a不是li的屬性，它是一個嵌套標籤。你不得不使用

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

作爲一個側面說明，要小心if(lists[i].className=="menu")，因爲如果貴麗的類之一是「菜單otherClass」將不再工作。 jQuery有一個很好的方法來處理這個問題：hasClass（），但如果你不使用jQuery，很容易寫出類似的東西。

來源

2012-05-26 05:03:01 Gary

也謝謝你的快速反饋 –

事實上，已經有一些與jQuery的選擇東西相當類似......'document.querySelectorAll（'li.menu a [href]'）'會給你列表中的所有鏈接具有一類「菜單」的項目。區別在於，（1）jQuery在IE7中工作：P，（2）jQuery添加了僞選擇器，這些在一些版本的CSS中不存在。 – cHao

querySelectorAll是DOM標準的一部分，可在大多數現代瀏覽器上使用，無需加載JQuery。請參閱https://developer.mozilla.org/en/DOM/document.querySelectorAll – HBP

您不能訪問嵌套的元素作爲另一個元素的成員：

lists[i].a

這是尋找與a一個名字list[i]元素中的一員 - 這不是找在它的錨。如果你想錨，你會寫：

list[i].getElementsByTagName("a")[0];

來源

2012-05-26 05:03:30 Sampson

謝謝您的快速反饋 –

在現代瀏覽器的代碼可以更簡單，更高效：

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; 
}

欲瞭解更多信息，請參閱the documentation on querySelectorAll。

來源

2012-05-26 06:12:01 HBP

小javascript解決方案需要：這行是一個有效的代碼嗎？

回答

相關問題