Question

我正在尝试编写一个非常简单的脚本，但无法弄清楚那里的问题。脚本的功能应该是显示每个列表元素的内部html，但它只显示最后一个'Orange'

这是我在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

尝试将res作为标识符而不是字符串字符串常量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 3

这可以用另一种方式完成

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是目前推荐的方法[{3}}

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的值并将其注入字符串。

我的简单脚本出了什么问题？

5 个答案: