文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4，如何在从容器1中选择时显示容器2中的列表组项。

问引导4，如何在从容器1中选择时显示容器2中的列表组项。
EN

Stack Overflow用户

提问于 2018-11-21 06:48:14

回答 1查看 725关注 0票数 1

我正在使用引导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示例

你能帮上忙吗？此外，我将需要一个垂直滚动条后9个项目或长。并希望选择保持蓝色突出显示。当从容器1选择项时，容器2将更新，否则保持为空。

jquery

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-21 08:22:51

下面的答案是最简单的解决方案，只是给你的想法，当然还有其他更好的解决方案。

在这个答案中，我使用了简单的Jquery代码，并对您在柱塞()中发布的代码进行了一些简单的html调整，您可以根据需要的语法来调整它。

关于容器选择，可以在两个容器中使用的每个锚点中添加一个数据集属性。左边容器中数据集的值表示右侧必须包含的项的数量。正确容器中数据集的值表示若干项。

这是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");
});

对于问题的最后一部分，您可以在html的开头添加一个d- to 类到html的所有锚点，或者在上述事件之前在javascript文件的开头添加以下行。

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

希望能帮上忙

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53406620

复制

相似问题

问引导4，如何在从容器1中选择时显示容器2中的列表组项。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4，如何在从容器1中选择时显示容器2中的列表组项。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4，如何在从容器1中选择时显示容器2中的列表组项。
EN