javascript - 当关联类有多个实例时，javascript 行为不当

Question

下面的 Js 片段适用于单个 html 表 (class = mtable)，基本上当我在表上向左滚动时它会卡住第一列。当我有多个“mtable”类 html 表时，它会出现错误，其中在一个表上滚动会导致所有表同时滚动。我应该如何解决这个问题，以便每个表都能独立工作？

$(document).on('mouseover', '.mtable tbody', function(){
    // alert('scrolling');
    $('.mtable tbody').on('scroll', function() {
      $('.mtable thead').css("left", -$(".mtable tbody").scrollLeft());
      $('.mtable thead tr th:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
      $('.mtable tbody tr td:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
    });
});

Answer 1

您需要存储对当前 .mtable 元素的引用，然后仅基于该表调用 DOM 遍历函数，如下所示:

$(document).on('mouseover', '.mtable tbody', function() {
  var $tbody = $(this);
  var $table = $tbody.closest('.mtable');
  var $thead = $table.find('thead');

  var $tbody = $table.find('tbody').off('scroll').on('scroll', function() {
    $thead.css("left", -$tbody.scrollLeft());
    $thead.find('tr th:first-child').css("left", $tbody.scrollLeft() - 2);
    $tbody.find('tr td:first-child').css("left", $tbody.scrollLeft() - 2);
  });
});