2

次のようなスクリプトがあります。多数の div があり、カーソルが 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>
...
4

3 に答える 3

1

試す ：

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

セレクターで始まるを使用して、開始でid始まるすべての DOM 要素を選択し、addClassとremoveClassea_を使用してクラス属性を切り替えます。

作業例はこちら

于 2012-04-26T12:54:47.400 に答える
0

可能であれば、これらの要素に固有のクラスを追加することをお勧めし<div>ます。そうでない場合は、IDの「属性で始まる」セレクターを使用し<div>て、「ea_」で始まるIDを持つすべての要素を選択できます。次に、を使用して、コールバック関数内でイベントをトリガーthisしたを参照します。<div>

$(function() {   
    $('div[id^="ea_"]').hover( function(){    
        $(this).attr('class','myClassHover'); 
    },  
    function(){       
        $(this).attr('class','myClass'); 
    }); 
});
于 2012-04-26T13:01:50.630 に答える
0

このエレガントなソリューションを試してください。すべての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/

于 2012-04-26T13:32:55.037 に答える