показать / скрыть строку в столбце зависания другой строки с универсальным кодом (Dynami c)?

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

Этот же лог c распространяется на все остальные столбцы.

Он должен быть динамическим c

Количество столбцов и строк может отличаться. В одно время это может быть 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/

Спасибо за помощь

Всем, кто собирается ответить. Большое спасибо, что нашли время. Я был бы очень признателен за решение с работающей скрипкой, но, конечно, любые предложения абсолютно приветствуются. Кроме того, если что-то неясно по этому вопросу, пожалуйста, позвольте мне улучшить его, прежде чем голосовать.

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>

Answer 2

Сначала большое приветствие @MoshFeu для публикации частично хорошего ответа. Теперь имейте в виду, что его ответ ясен и очень информативен и должен получить все голоса, которые он заслуживает. Без этого я бы не смог заставить его работать для моего конкретного c сценария.

Я изменил его код для достижения необходимого эффекта, и вот этот модифицированный код и соответствующая скрипка: https://jsfiddle.net/djwx5k1g/

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