マウスオーバー時のdiv数の変更クラス

Question

次のようなスクリプトがあります。私は複数のdivを持ち、カーソルがdiv上にあるときは、そのdivのクラス名を次のように変更します。しかし、私はそのような部門の数を知らない。どのように私はそれに応じてコードを更新することができますか？ありがとう。

$(function() { 
    $('#ea_0').hover(function(){  
    $('#ea_0').attr('class','myClassHover'); 
    }, 

    function(){  
     $('#ea_0').attr('class','myClass'); 
    }); 
}); 

<div id="ea_0" class="myClass" ></div> 
<div id="ea_1" class="myClass" ></div> 
<div id="ea_2" class="myClass" ></div> 
... 

Answer 1

試してみてください。

$(function() { 
    $('div[id^="ea_"]').hover(function() { 
     $(this).addClass('myClassHover'); 
     $(this).removeClass('myClass'); 
    }, function() { 
     $(this).addClass('myClass'); 
     $(this).removeClass('myClassHover'); 
    }); 
}); 
​ 

がidがea_を開始すると、すべてのDOM要素を選択するようにstarts with selectorを使用し、クラスが

Working example here

Answer 2

が追加属性を切り替えることがaddClassとremoveClassを使用していますそれらに特有のクラス<div>要素が可能な場合はより良い選択肢になります。そうでない場合は、IDの「セレクタで始まる」属性を使用して、IDが「ea_」で始まるすべての<div>要素を選択できます。次にthisを使用して、コールバック関数内でイベントをトリガーした<div>を参照してください。

$(function() { 
    $('div[id^="ea_"]').hover(function(){  
     $(this).attr('class','myClassHover'); 
    }, 
    function(){  
     $(this).attr('class','myClass'); 
    }); 
}); 

Answer 3

このエレガントな解決策を試してください：あなたは、ちょうど別のdivの内側にあなたのdiv要素のすべてをラップする必要があり、代わりにそれらの一つ一つにホバーイベントを結合の、あなただけのコンテナにマウスオーバーとマウスアウトイベントをバインドする必要がありますdivをスピードアップするためにdiv。

$('div:first').mouseover(function(event) { 
    $(event.target).closest('div').addClass('myClassHover'); 
}); 
$('div:first').mouseout(function(event) { 
    $(event.target).closest('div').removeClass('myClassHover'); 
}); 

デモ：あるためにhttp://jsfiddle.net/8vD56/