特定のクラスの要素がホバリングされたときにjs関数を呼び出す方法は？

Question

私は、特定のクラスの要素がホバリングされたときに関数を呼び出そうとしています。 100個のdivがあり、それらのうち50個がクラステストを持っていると仮定して、私が望んでいたのは、クラステストでdivにマウスを置くと関数が呼び出されるということでした。

<div class="test" mouseover="myfunc()"> 
</div> 
<div class="test" mouseover="myfunc()"> 
</div> 
<div class="test" mouseover="myfunc()"> 
</div> 
. 
. 
. 
<script type="text/javascript"> 
function myfucn(){......} 
</script> 

が、これはあまりにも退屈なるので、私がしたいことは何度も何度もmouseoverイベントを記述することなく、すべてのテストクラス要素を対象と一般的な方法です。私は（私はそれを学んでいたので）javascriptを好むが、jqueryで問題はない。

Answer 1

Javascriptだけを使用していない場合は、 このようにJqueryを試してみてください。

function doSomeThing(){ 
    //do something 
} 

$("div.test").hover(function(){ 
    doSomeThing(); 
}); 

あなただけJavascriptがこれを試してみたい場合：あなたはdocument.getElementsByClassName("test");

を行うと

function doSomeThing(){ 
    //do something 
} 

var el = document.getElementsByClassName("test"); 
for (i in el){ 
    el[i].addEventListener("mouseover", function(){ 
     //do something here 

     //or call a function 
     doSomeThing(); 
    }); 
} 

詳しい情報

あなたはそれがArrayとして取得します。次に、彼らが馬に乗った時を知らせるためにそれらを追加する必要があります。addEventListener("mouseover") その後、あなたはその機能の中でやりたいことを書いています。

Answer 2

あなたはjQueryのからホバー機能を使用することができます。たとえばhttps://api.jquery.com/hover/

：

$("td").hover(
    function() { 
    $(this).addClass("hover"); 
    }, function() { 
    $(this).removeClass("hover"); 
    } 
);` 

この例では、クラスのホバーを追加したときでホバー - とクラスを削除したときに、ホバーアウト

Answer 3

することができます

• すべての要素を取得します（例：getElementsByClassName）とし、それらの各々にイベントハンドラをバインド（addEventListener）又は
• とは、各時間イベントが発生し、これらの要素の祖先にイベントハンドラを結合して、イベントオブジェクトのtarget性を確認し（あなたが気にするクラスを持つ要素であるかどうかを確認するために、イベントハンドラ関数の最初の引数です）

Answer 4

この方法では、jQueryが使用されます。

$('.myClass').hover(function() { 
    // Do stuff here 
}); 

Answer 5

$("test").hover(
    function(event) { 
    // The mouse has entered the element 
    }, 
    function (event) { 
    // The mouse has left the element 
    } 
); 

あなたはjQueryのを使用した場合、あなたがここにバニラJSの代わりにjQueryでそれをしたい場合は、コードが

Answer 6

上記のようなものであるべき基本的な例である：

var elements = document.getElementsByClassName('YOUR_CLASS') 
for (var i = 0; i < elements.length; i++) { 
    elements[i].addEventListener('mouseover', function (event) { 
    console.log('Element', event.target, 'is hovered') 
    }) 
} 

ここでは基本的に "YOUR_CLASS"クラスを持つすべての要素を選択し、mouseoverイベントに関数をバインドします。