2

最初の 24 の子にホバーを追加して、他の要素の 24 の個別の要素に塗りつぶしを追加したいと考えています。

そのようです：

$('tr td:nth-child(1)').mouseover(function(){
  $('rect:nth-of-type(1)').css("fill", "black" );
});

$('tr td:nth-child(2)').mouseover(function(){  
  $('rect:nth-of-type(2)').css("fill", "black" );
});

$('tr td:nth-child(3)').mouseover(function(){
  $('rect:nth-of-type(3)').css("fill", "black" );
});

しかし、私は自分自身を24回繰り返したくありません。これを処理する最良の方法は何ですか?

4

3 に答える 3

5

ltセレクターを見てください：

$('tr td:lt(24)')

http://api.jquery.com/lt-selector/

于 2013-01-28T23:41:31.917 に答える
1 
$('tr td:lt(24)').mouseenter(function(){

   var index = $(this).index();
   $('rect').eq( index ).css("fill","black");

});

:lt()セレクターが必要ないよりも24を超える要素がない場合

聖書

.slice()次のようなJS メソッドを使用することもできます。

$('tr td').slice(0,24)

.eq()( または)を使用して目的の要素をターゲットにし、次:eq()-selectorを使用して以前の要素のコレクションに移動することもできます.prevAll()

$('tr td:eq(24)').prevAll()

を使用してターゲット要素セレクターを使用して、常にできるだけ具体的にしてください #ID

于 2013-01-28T23:40:24.587 に答える
0

これは、囲んでいるテーブルでイベント委任を使用すると、パフォーマンスが向上します。

$('#mytable').on('mouseover', 'td:lt(24)', function() {
    var n = $(this).index();
    $('rect').eq(n).css('fill', 'black');
});

これは、一致するすべての要素に同じ関数をバインドするよりも効率的です。

于 2013-01-28T23:53:08.690 に答える