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

したがって、問題は、要素に変数の正しい値を与える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);
}

もう 1 つのオプションは、はるかに単純です。ハンドラーで 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 に答える