javascript - 使用通用（动态）代码在悬停列的其他行上显示/隐藏行？

Question

在网页上，我在一行 ( .toplvl) 中有五列。每个人都有自己的班级.tli-1, .tli-2, .tli-3, .tli-4, .tli-5

所以第三列有类.tli-3

在该行下方，.toplvl我还有 5 行被称为.tlcr-1, .tlcr-2, .tlcr-3, .tlcr-4, .tlcr-5

所以第三排有课.tlcr-3

我想达到什么

将鼠标悬停在.tli-1它上面时.tlcr-1，只要鼠标指针位于其中一个.tli-1或.tlcr-1

同样的逻辑适用于所有其他列。

它需要是动态的

列数和行数可以不同。一次可以是 3，但也可以是 50。除了数字部分之外，课程将保持不变。如果他们的位置例如 50 那么最后一列将被调用.tli-50，最后一行tlcr-50

我当前的代码

哪个有效，但需要我将其复制 50 多次并手动更改数字。为此必须有更好的方法。

$( ".tli-2" ).mouseenter(function() {
  $( ".tlcr-2" ).css('display', 'block');
})
$( ".tli-2" ).mouseleave(function() {
  $( ".tlcr-2" ).mouseenter(function() {
      $( ".tlcr-2" ).css('display', 'block');
      $( ".tlcr-2" ).mouseleave(function() {
        $( ".tlcr-2" ).css('display', 'none');
      })
  })
  $( ".tlcr-2" ).css('display', 'none');
});

更好地理解结构的小提琴

https://jsfiddle.net/3naxLfm6/

感谢您的帮助

凡是要回复的人。非常感谢您抽出宝贵时间。我真的很感激一个带有工作小提琴的解决方案，但当然，任何建议都是绝对受欢迎的。此外，如果对这个问题有任何不清楚的地方，请允许我在否决投票之前让它变得更好。

标签： javascriptjquery

Answer 1

如果我理解正确，您可以做一些事情。

1. mouseenter听一次mouseleave

2. 在鼠标输入时，首先，hide()所有行。然后，获取悬停项的索引和show()相应的 (by eq()) 行。

$('.column').on('mouseenter', function() {
  $('.tlcr').hide();
  const index = $(this).index('.column');
  $('.tlcr').eq(index).show();
});

.row {
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-between;
  width:100%;
  min-height:50px;
}
.tlcr {
  display: none;
}
.column {
  text-align:center;
}
.w20 {
  width:20%;
}
.tli-1, .tlcr-1 {background:red;}
.tli-2, .tlcr-2 {background:blue;}
.tli-3, .tlcr-3 {background:green;}
.tli-4, .tlcr-4 {background:purple;}
.tli-5, .tlcr-5 {background:orange;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row toplvl">
  <div class="column w20 tli-1">Item 1</div> 
  <div class="column w20 tli-2">Item 2</div> 
  <div class="column w20 tli-3">Item 3</div> 
  <div class="column w20 tli-4">Item 4</div> 
  <div class="column w20 tli-5">Item 5</div> 
</div>
<div class="row tlcr tlcr-1">Content 1</div>
<div class="row tlcr tlcr-2">Content 2</div>
<div class="row tlcr tlcr-3">Content 3</div>
<div class="row tlcr tlcr-4">Content 4</div>
<div class="row tlcr tlcr-5">Content 5</div>