jquery - テーブルの x 列にカーソルを合わせ、x 要素を入力します。

Question

私はテーブルと四角形を含むsvgチャートを持っています。

テーブルの最初の列にカーソルを合わせて、チャートの最初の四角形を塗りつぶしたいのですが、テーブルの2番目の列にカーソルを合わせると、2番目の四角形を塗りつぶします。

これを繰り返す 2

これが機能します：

    $('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" );
    });

しかし、私は自分自身を24回繰り返す必要があります. 私はこの解決策を試しました：

$('tr td:lt(24)').hover(
  function(){
    var index = $(this).index();
    $('rect').eq( index ).css("fill", "black" );
    },
  function(){
    var index = $(this).index();
    $('rect').eq( index ).css('fill', 'steelblue');
});

ただし、テーブルにカーソルを合わせると、テーブルの最初の行の td のみが選択されるようになりました。

Answer 1

tr:lt(24) tdの代わりに使用しtd:lt(24)ます。24 列目ではなく、24行目未満が必要です。