Question

我正在使用引导程序4，并且在容器中并排有两个列表组。从容器1中选择列表项后，我试图显示容器2中的项目。如何填充它？

在我正确的容器中的每一行，确定我的第二个容器应填充多少个项目。我们现在可以使用值。

<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 example

可以帮忙吗？另外，我将需要9个项目或更长的时间之后的垂直滚动条。并希望选择以蓝色突出显示。当选择了容器1中的项目时，容器2将更新，否则保留为空。

Answer 1

下面的答案是最简单的解决方案，它只是为了给您带来想法，当然还有其他更好的解决方案。

在此答案中，我对您在Plunker中发布的代码使用了简单的Jquery代码和一些小的html调整，您可以将其调整为所需的语法。

关于容器的选择，您可以在两个容器中使用的每个锚点中添加一个数据集属性。左侧容器中data-set的值表示右侧必须包含的项目数。右侧容器中的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();
    }
  });
});

请注意，我将活动引导程序类用于选择突出显示。对于问题的第三部分，您可以使用突出显示部分

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

对于问题的最后一部分，您可以在HTML开头的所有锚点中添加 d-none 类，也可以在javascript文件的开头添加以下行，然后以上事件

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

希望这很有帮助

引导程序4，如何在从容器1中选择容器后显示容器2中的列表组项目

1 个答案: