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

更好地理解结构的 fiddle

https://jsfiddle.net/3naxLfm6/

感谢您的帮助

所有要回复的人。非常感谢您抽出时间。我真的很感激一个带有工作 fiddle 的解决方案，但当然绝对欢迎任何建议。此外，如果问题有任何不清楚的地方，请允许我在投反对票之前改进它。

Answer 1

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

1. 听一次 mouseenter 和 mouseleave

2. 鼠标输入，首先，hide()所有行。然后，获取悬停项目的 index和 show()相应的(按 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>