2

次の方法で共有classNameを持つHTML要素を取得して、NodeListを作成しました。

> var btn = document.getElementsbyClassName("btn")

これは HTML コードです。

 <div id="main">
    <div class="btn">
    </div>
    <div class="btn">
    </div>
    <div class="btn">
    </div>
    <div class="btn">
    </div>   
 </div>

したがって、この特定の NodeList オブジェクトの長さは 4 です。

ここで、この要素の 1 つがクリックされたときに関数を呼び出したいと考えています。for ループを使用してそれを実現します。

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething;
};

function doSomething() {
  // here come some code.
};

しかし、te イベントが発生した NodeList のインデックスを取得するにはどうすればよいでしょうか? また、配列の各要素に一意の名前を割り当てるにはどうすればよいでしょうか?

4

2 に答える 2

2

これが私がすることです：

var btn = document.getElementById('main').getElementsByTagName('div');
for(var i = 0; i < btn.length ; i++) {
    btn[i].id = "btn"+i;
    if(btn[i].className=="btn")
        btn[i].onclick = doSomething;
};

function doSomething() {
    var num = this.id.substr(3);
  alert("Div " + num + " clicked");
};

（クロスブラウザにするために getElementsByClassName() を取り出しました。もちろん、クロスブラウザにするメソッドの独自のオーバーライドを実装していないと仮定しています）。

編集: innerHTML の質問については、添付のフィドルをチェックして、正常に動作することを確認してください: http://jsfiddle.net/TdCD8/

于 2013-04-11T14:57:19.247 に答える