Bootstrap 4, Как показать элементы группы списков в контейнере 2 при выборе из контейнера 1

Question

Я использую загрузчик 4, и у меня есть две группы списков в контейнерах рядом.Я пытаюсь показать элементы в контейнере 2 при выборе элемента списка из контейнера 1. Как мне заполнить это?

В каждой строке в моем правом контейнере определите, сколько элементов должно заполнить мой второй контейнер.Сейчас мы можем использовать значения.

<div class="col-6">
  <div class="card ">
      <div class="card-header py-2">Group Name</div>
      <div class="list-group">
          <a href="#" class="list-group-item py-0 list-group-item-action">Container Left 7 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Cras justo odio 10 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis 17 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Morbi leo risus 12 items</a>                            
      </div>
  </div>
</div>
<div class="col-6">
  <div class="card">
      <div class="card-header py-2">Items</div>
      <div class="list-group">
          <a href="#" class="list-group-item py-0 list-group-item-action">Container Right</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Cras justo odio</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis in</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Morbi leo risus</a>                            
      </div>
  </div><!--class="card"-->
</div><!--class="col-6"-->

У меня есть этот пример plnkr

Вы можете помочь?Кроме того, мне понадобится вертикальная полоса прокрутки после 9 элементов или долго.И хотите, чтобы выделение оставалось выделенным синим цветом.Контейнер 2 обновляется, когда элементы из контейнера 1 выбраны, в противном случае они остаются пустыми.

Answer 1

Следующий ответ - самое простое решение, просто чтобы дать вам идею, конечно, есть и другие лучшие решения.

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

Что касается выбора контейнера, вы можете добавить атрибут data-set в каждую привязку, которой вы являетесьиспользуя в обоих контейнерах.Значение набора данных в левом контейнере представляет количество элементов, которые должна содержать правая сторона.Значение набора данных в правом контейнере представляет количество элементов.

Вот HTML-код

<div class="col-6">
  <div class="card ">
    <div class="card-header py-2">Container Left</div>
    <div id="leftContainer" class="list-group">
      <a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">Container Left 7 items</a>
      <a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">Cras justo odio 10 items</a>
      <a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis 17 items</a>
      <a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">Morbi leo risus 12 items</a>                            
    </div>
  </div>
</div>
<div class="col-6">
  <div class="card">
    <div class="card-header py-2">Container Right</div>
    <div id="rightContainer" class="list-group" style="height:225px; overflow-y: scroll">
      <a href="#" data-set="1" class="list-group-item py-0 list-group-item-action">1</a>
      <a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">2</a>
      <a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">3</a>
      <a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">4</a>                            
      <a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">5</a>
      <a href="#" data-set="6" class="list-group-item py-0 list-group-item-action">6</a>
      <a href="#" data-set="7" class="list-group-item py-0 list-group-item-action">7</a>
      <a href="#" data-set="8" class="list-group-item py-0 list-group-item-action">8</a>
      <a href="#" data-set="9" class="list-group-item py-0 list-group-item-action">9</a>
      <a href="#" data-set="10" class="list-group-item py-0 list-group-item-action">10</a>
      <a href="#" data-set="11" class="list-group-item py-0 list-group-item-action">11</a>
      <a href="#" data-set="12" class="list-group-item py-0 list-group-item-action">12</a>
      <a href="#" data-set="13" class="list-group-item py-0 list-group-item-action">13</a>
      <a href="#" data-set="14" class="list-group-item py-0 list-group-item-action">14</a>
    </div>
  </div><!--class="card"-->
</div><!--class="col-6"-->

Обратите внимание на стиль rightContainer div, это решит проблемувертикальная прокрутка ( вторая часть вашего вопроса ), но, конечно, вам нужно будет отрегулировать ее по высоте каждого элемента после завершения его стилизации.

Вот функция события Jquery, которая будетсделайте трюк выбора

$("#leftContainer > a").click(function(event){
  event.preventDefault();
  $("#leftContainer > a").removeClass("active");
  $(this).addClass("active");
  var leftDataSet = parseInt($(this).attr("data-set"));
  $("#rightContainer > a").removeClass("active");
  $("#rightContainer > a").hide();
  $("#rightContainer > a").each(function(){
    if(leftDataSet >= parseInt($(this).attr("data-set"))){
      $(this).show();
    }
  });
});

Обратите внимание, что я использовал класс начальной загрузки active для выделения выделения.А для третьей части вашего вопроса выделенной части вы можете использовать это

$("#rightContainer > a").click(function(event){
  event.preventDefault();
  $(this).toggleClass("active");
});

Для последней части вашего вопроса вы можете добавить d-none Класс для всех якорей в HTML в начале или вы можете добавить следующую строку в начале вашего файла JavaScript перед событиями выше

$("#rightContainer > a").hide();

Надеюсь, это было полезно