1

データベースから取得した「タグ」からボタンを作成しています。各ボタンにマウス イベント リスナーを追加したいと思います。ただし、リスナーは最後に作成されたボタンでのみ機能するようです。何か案は？ありがとう。

var tagsContainer = document.getElementById('tags');
var tagarray = placetags.split(" ");
for (var tagcounter = 0; tagcounter < tagarray.length; tagcounter++){
  var tag = document.createElement('input');
  tag.type = 'button';
  tag.value = tagarray[tagcounter];
  tag.id = 'tagbutton';
  tagsContainer.appendChild(tag);
  tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
  });
  tag.addEventListener('mouseout' , function(){
    tag.style.color = 'orange';
  });
}
4

1 に答える 1

1

これからハンドラーを変更する必要があります

tag.addEventListener('mouseover' , function(){
    tag.style.color = 'white';
});

これに

tag.addEventListener('mouseover' , function(){
    this.style.color = 'white';
});

元のコードでは、ハンドラーはタグ変数を閉じてtagいるため、最後に作成されたボタンを参照することになります。

于 2012-12-08T02:52:32.793 に答える