jquery - 将鼠标悬停在表格的 x 列上并填充 x 元素

Question

我有一个表格和一个带有矩形的 svg 图表。

我想将鼠标悬停在表格的第一列并填充图表的第一个矩形，当您将鼠标悬停在表格的第二列时填充第二个矩形。

这是重复的 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 列。