2

divJavaScriptを使用して動的に複数の要素を作成しています。以下は私が使用したコードです：

for(i=0;i<3;i++)
{
  var d1 = document.createElement('div');
  d1.id = "div" + i;
  var l1 = document.createElement('label');
  l1.innerHtml = "Hello";
  d1.appendChild(l1);
  var line1 = document.createElement('hr');
  d1.appendChild(line1);
  document.body.appendChild(d1);    
}

出力：

こんにちは

こんにちは

こんにちは

ここで、イベントsayを動的に追加onmouseoverしonmouseoutて、カーソルを特定のdiv要素say div1、div2またはdiv3、に移動すると、それぞれdivのセクションの色が変わり（たとえば青）、カーソルが移動すると元の色に戻るようにします。

試しましたが、div動的に作成したIDを取得できません。

4

3 に答える 3

1

IDで選択する必要はありません。あなたはすでに要素を持っているので、先に進んでそれにハンドラーを追加してください。

for(i=0;i<3;i++) {
  var d1 = document.createElement('div');
  d1.id = "div" + i;

  var l1 = document.createElement('label');
  l1.innerHtml = "Hello";
  d1.appendChild(l1);

  var line1 = document.createElement('hr');
  d1.appendChild(line1);
  document.body.appendChild(d1);

  d1.onmouseover = function() {
     this.style.color = "#00F";
  };
  d1.onmouseout = function() {
     this.style.color = "";
  };
}
于 2012-11-18T17:07:04.177 に答える
0

ハンドラーを作成してから、ループに割り当てます。

var mouseover = function() {
        this.style.backgroundColor = '#AAF';
    },
    mouseout = function() {
        this.style.backgroundColor = '';
    };
for (i = 0; i < 3; i++) {
    var d1 = document.createElement('div'),
        l1 = document.createElement('label'),
        line1 = document.createElement('hr');
    d1.id = "div" + i;
    l1.innerHtml = "Hello";
    d1.appendChild(l1);
    d1.appendChild(line1);
    d1.onmouseover = mouseover;
    d1.onmouseout = mouseout;
    document.body.appendChild(d1);
}​

デモ：http：//jsfiddle.net/vfVCm/

于 2012-11-18T17:08:12.943 に答える
0

要素が動的に作成される場合は、動的に作成するすべての要素ではなく、イベント委任を使用して、イベント リスナーを親要素にアタッチする方がよい場合があります。このようにして、リスナーは、アタッチ後に作成された要素に対しても機能します。DOM イベントがバブリングし、イベントの実際のターゲットが として利用可能になりますevent.target。次に例を示します。

<div id="parent">
  <p id="event1">A</p>
  <p id="event2">B</p>
  <p id="event3">C</p>
</div>

// call on DOMContentLoaded
document.getElementById("parent").addEventListener("click", function(e) {
  if(e.target && e.target.nodeName.toLowerCase() == "p") {
    alert("Clicked element " + e.target.id);
  }
});

jsfiddleを参照してください。

于 2012-11-18T17:19:15.130 に答える