我的簡單腳本有什麼問題？

Question

我想寫一個非常簡單的腳本，並不能找出那裏的問題。腳本的功能應該是顯示每個列表元素的內部HTML，但它一直顯示只有最後一個是「橙」

以下是我在我的html：

<ul id='mylist'> 
    <li>Red</li> 
    <li>Green</li> 
    <li>Black</li> 
    <li>Orange</li> 
</ul> 

及以下是該腳本：

var x = document.getElementById('mylist'); 
var z = x.getElementsByTagName('li'); 

for (i = 0; i < z.length; i++) {  
    var res = z[i].innerHTML; 
    z[i].setAttribute('onclick','alert(res)'); 
} 

我可能需要在這裏添加一個封閉，但我不知道我是否真的需要，以及如何將其添加

Answer 1

試試這個：

var x = document.getElementById('mylist'); 
var z = x.getElementsByTagName('li'); 

for (var i = 0; i < z.length; i++) { 
    (function(i) { 
     var res = z[i].innerHTML; 
     z[i].onclick = function() { 
      alert(res) 
     }; 
    })(i); 
}​ 

http://jsfiddle.net/sssonline2/UYEa9/

Answer 2

這可以用另一種方式來完成

var lis = document.getElementsByTagName('li'); 
for (var i = 0; i < lis.length; i++) { 
     lis[i].addEventListener('click', 
      function() { 
       console.log('asd'); 
       alert(this.innerHTML); 
      } 
      , false); 
} 

Try it on JSFiddle

使用addEventListener是當前推薦的方式做到這一點according to MDN.

Answer 3

通過使試試這個res作爲標識符instea字符串字符串常量的d Demo on JsFiddle

var x = document.getElementById('mylist'); 
var z = x.getElementsByTagName('li'); 

for(i=0;i<z.length;i++){ 
     var res = z[i].innerHTML; 
     z[i].setAttribute('onclick',"alert('"+res+"');"); 

}​ 

Answer 4

一個簡單的解決方案

HTML

<ul id="test-list"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

的JavaScript

var x = document.getElementById('test-list'); 
var li = x.getElementsByTagName('li'); 

for(var i = 0; i < li.length; i++) { 
    li[i].onclick = function() { 
     alert(this.innerHTML); 
    } 
} 

Answer 5

首先，確保你有一個結束</ul>標籤：

<ul id="test-list"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

其次，使用DOM對象的onclick財產或addEventListener()：

var x = document.getElementById('mylist'); 
var z = x.getElementsByTagName('li'); 

for(i=0;i<z.length;i++){ 
    z[i].onclick = function() { 
    alert(this.innerHTML); // In this scope, "this" 
    };      // means the element that was clicked 
} 

或

var x = document.getElementById('mylist'); 
var z = x.getElementsByTagName('li'); 

for(i=0;i<z.length;i++){ 
    z[i].addEventListener('click', function() { 
    alert(this.innerHTML); // In this scope, "this" 
    });      // means the element that was clicked 
} 

如果必須使用setAttribute()，你需要非常小心作用域。 res的最後一個值是orange，這就是瀏覽器所記得的。當您單擊該元素時，瀏覽器會檢查當前值res併發出警報。如果您使用

setAttribute('onclick', 'alert"' + res '")'); 

這將需要的res值在for循環的當前迭代，注入的字符串。