1

我有一个脚本，我将元素附加到列表中。我需要当我单击元素时调用一个函数，并且对于这个函数，在创建 li 时需要一个变量的值（它是li内容）。

我已经检查了像添加这样的解决方案newLi.onclick = function(){...}。

这个解决方案的问题是我没有在函数中得到正确的值，我得到了列表中另一个元素的值。

现在这就是我创建元素的方式：

var ULlist = document.getElementById('ULid');
for(i=0;i<data.length;i++){
   var Value = data[i] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function(){alert(Value)} //not displaying the right value
   ULlist.appendChild(newLi);
}

所以问题是，有没有办法创建 te onclick 事件，为元素提供正确的变量值？

编辑：我添加了更多代码。正在创建 Li，并且信息显示正确，唯一的问题是在尝试创建事件时它没有给出正确的值，这应该是在li

4

3 回答 3

6

您可以通过在内部创建函数并将值保持在该函数的范围内来实现这一点。

var data = [10, 20, 30, 40, 50, 60, 70];
addItems = function() {
    var list = document.getElementById("list");
    for (var i = 0; i < data.length; i++) {
        var newLi = document.createElement("li");
        newLi.innerHTML = i + 1;
        list.appendChild(newLi);
        (function(value){
        newLi.addEventListener("click", function() {
           alert(value);
        }, false);})(data[i]);
    }

}​

jsfiddle：http: //jsfiddle.net/Qf5JZ/1/

于 2012-08-07T13:25:30.530 回答
3

使用DOM2 事件监听器，特别是element.addEventListener API：

function clickHandlerFor(data) {
    return function(event) {
        var li = event.target;
        // do something with data and li.
    };
}

for (...) {
    var Data = ... //function to get data
    var newLi = elements.createElement('li');
    newLi.appendChild(elements.createTextNode(Data));
    newLi.addEventListener("click", clickHandlerFor(Data), false);
    ULlist.appendChild(newLi);
}

另一种选择要简单得多：在处理程序中使用 TextNode 值：

function handler(event) {
    var dataValue = event.target.firstChild.nodeValue; // value of TextNode created by elements.createTextNode(Data)
    // handle dataValue
}

newLi.addEventListener("click", handler, false);
于 2012-08-07T12:56:36.793 回答
3

当我遇到这个问题时，我是这样解决的：

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   var index = i;
   (function() {
   var Value = data[index] //function to get data
   var newLi = document.createElement('li');
   newLi.appendChild(elements.createTextNode(Value));
   newLi.onclick = function() { ... };
   ULlist.appendChild(newLi);
   }());
}

编辑：今天，我记得关于范围的另一件事。将参数“i”发送到循环内运行是另一种解决方案：

var ULlist = document.getElementById('ULid');
for(var i=0; i<data.length; i++){
   (function(index) {
       var Value = data[index] //function to get data
       var newLi = document.createElement('li');
       newLi.appendChild(elements.createTextNode(Value));
       newLi.onclick = function() { ... };
       ULlist.appendChild(newLi);
   }(i));
}

试试这个，让我知道它是否有效。

于 2012-08-07T13:06:42.830 回答