1

たとえば、次のhtmlリストがある場合、リストアイテムオブジェクトを参照する方法を知りたいです 

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>

一意の elementId を持たなくても、onclick を Item2 li に登録するにはどうすればよいでしょうか。 

document.getElementById('subdiv_3').addEventListener('click', function();, false);

私の目標は、最終的には、リスト オブジェクト番号に基づいて一意のパラメーターを持つリスト オブジェクトの数について、各リスト オブジェクトに関数を割り当てることです。 

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}
4

3 に答える 3

2

subdiv_3そのすべての子要素を取得できます<li>。次に、そのループを繰り返して、関数を追加します。

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

コードサンプルを見ると、関数を作成するループにいるときに、クロージャスコープの問題が発生する可能性があります。（すべての関数はiの同じ値を使用しているように見えます。）この問題に対処するには、この質問に対する私の答えを確認してください：Javascriptの要素の配列に引数を持つイベントハンドラーを追加する方法は？

于 2008-12-10T05:59:04.033 に答える
1

@Supernovah: 実際に実際の関数を に割り当てることができますsetTimeot()。これにより、1 つのプロパティを設定するだけでなく、より複雑なことを行う場合に邪魔になる文字列の書式設定が不要になります。

これはコードです：

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

そして簡単な説明：

クロージャーを使用することは、いつトリガーされるかを確認するためのトリックでありsetTimeout()、すべての変数にはまだ期待値があります。

これを行うには、関数を返す関数を記述します。外側の関数はパラメーターを受け取りますが、内側の関数は受け取りません。ただし、外部関数のパラメーターを参照します。ループでは、外側の関数を (正しいパラメーターを使用して) 呼び出し、毎回まったく新しい内側の関数を取得します。それぞれに独自のバージョンのパラメーター値があります。これは、 に割り当てるものsetTimeout()です。

于 2008-12-10T07:52:03.947 に答える
0

Benry による Benry の回答に関するコメントに応えて、彼のコードを使用した後、次は各 elementLi が els[i] で参照できることを証明します。

function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
于 2008-12-10T06:29:44.380 に答える