私のウェブサイトのaddEventListenerとtarget clicの問題

Question

私はHTML、CSSで遊んでいます。& JavaScriptですが、あまり良くありません。私は、次のことをしようとしている：

<script type="text/javascript"> 
var tab = document.getElementsByClassName("MYCLASS"); 
for(var i = 0, j=tab.length; i<j; i++){ 
tab[i].addEventListener('click', afficher,false); 
} 
function afficher(){ 
alert(this.class); 
} 
</script> 

はすべて私.MYCLASSdivの上のクリックリスナーが動作している取り付けます。ただし、警告ウィンドウのGoogle Chromeでは.MYCLASSではなくundefinedが返されます。

だから私は、代替として、このコードを試してみました：

function afficher(e){ 
    var target = e.target || e.srcElement; 
    var $target = $(e.currentTarget); 
    alert(target.class); 
} 

しかし、結果はまったく同じです。どんな助けもありがとう、ありがとう！

Answer 1

classという名前html DOMオブジェクトに定義されたプロパティがありませんので、これがあります。

クラス値を取得する場合は、this.classNameを使用してください。

だからあなたの関数は次のようになります。

function afficher(){ 
    alert(this.className); 
} 

Answer 2

単純なfor forループを使用できますが、イベントをDOM要素だけに追加する必要があります。 getElementsByClassName（）によって返されるHTMLリストは、DOM要素を返すだけではありません。

var tab = document.getElementsByClassName("MYCLASS"); 
 

 
for(var i in tab){ 
 

 
    // you need this check to filter anything that isn't a DOM element 
 
    if(typeof tab[i] ==="object"){ 
 
    tab[i].addEventListener('click', afficher,false); 
 
    } 
 

 
} 
 

 
function afficher(){ 
 
    alert(this.className); 
 
}