クラス名でdivを反転する

Question

私はマウスオーバーでdivを反転しようとしていますが、私は本当に便利ないくつかのページを見つけました。

followed this IDを設定してからthis oneに応じてHTMLにmouseoverプロパティを追加する必要がありますが、IDとしては簡単ではありません。ここで

は、これまでの私のコードです：

var abcElements = document.querySelectorAll('.builder_row_cover'); 

for (var i = 0; i < abcElements.length; i++) 
    abcElements[i].id = 'abc-'; 
var oHover = document.getElementById("abc-"); 
oHover.setAttribute("onmousehover", "flip()"); 


var k = 0; 

function flip() { 
var j = document.getElementById("abc-"); 
k += 180; 
j.style.transform = "rotatey(" + k + "deg)"; 
j.style.transitionDuration = "0.5s" 
} 

私はちょうど私が属性を設定して試してみましたが、始めませんが、HTMLにマウスオーバーを参照する方法、どんな提案していますか？

Answer 1

まず、イベントの名前はonmouseoverです。

複数の要素に同じIDを渡しても機能しません。 document.getElementById()は、そのIDを持つ最初の要素を返すだけで、マウスが終わった要素は返しません。

IDをまったく使用する必要はありません。イベントハンドラでthisを使用すると、イベントのターゲットを参照できます。

var abcElements = document.querySelectorAll('.builder_row_cover'); 

for (var i = 0; i < abcElements.length; i++) { 
    abcElements[i].addEventListener('mouseover', flip); 
} 

var k = 0; 

function flip() 
    k += 180; 
    this.style.transform = "rotatey(" + k + "deg)"; 
    this.style.transitionDuration = "0.5s"; 
}