JS (LOOPS)：寻找完美的过滤循环答案

【问题标题】：JS (LOOPS): Finding the perfect filtering loopJS (LOOPS)：寻找完美的过滤循环
【发布时间】：2019-07-23 03:24:29
【问题描述】：

今天，我开始了一项简单得可笑的任务，当我越做这个问题时，这个问题就越严重。你看，我正在尝试制作一个 JS 功能侧边栏，它将根据每个元素中的过滤属性过滤容器中的元素。如果它是（过滤规则）的一部分，则该元素应显示。否则，它应该不显示

<ul id="filteringSidebar">


  <li>Color Is Green</li>
  <li>Color Is Yellow</li>
  <li>Color Is Blue</li>
  <li>Color Is Violet</li>
  <li>Color Is Magenta</li>
  <li>Color Is Orange</li>
  <li>Color Is Indigo</li>
  <li>Color Is Gray</li>
  <li>Color Is Black</li>

</ul>



<div id="elementsContainer">

  <div> Blue </div>
  <div> Magenta </div>
  <div> Magenta </div>
  <div> Yellow </div>
  <div> Blue </div>
  <div> Orange </div>
  <div> Orange </div>
  <div> Indigo </div>
  <div> Blue </div>
  <div> Gray </div>
  <div> Blue </div>
  <div> Black </div>
  <div> Orange </div>

</div>

这是对我要实现的目标的非常原始的解释，但整个想法是让人们能够单击 UL 中 ID 为 filteringSidebar 的一个或多个列表项并期待结果根据用户输入。（如果按下黄色和橙色，ID 为 elementsContainer 的 DIV 中应该只显示黄色和橙色元素）

【问题讨论】：

您能否与我们分享您的过滤代码并描述您在使其正常工作时遇到的具体问题？

标签： javascript html css loops

【解决方案1】：

在这里，我为每个 <li> 项目提供了不同的 id，然后使用引导程序进行样式设置。然后通过使用引导程序d-none 隐藏每个<div>。使用 Query 将每个按钮分配给不同的功能，这些功能将切换 d-none。这只是一个基本的，可能有更简单的方法来做到这一点。

<html>

<head>
</head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="container">
  <script>
    function showDivGreen() {

      $("#green").each(function() {
        $('#green').toggleClass('d-none');
      })
    }

    function showDivYellow() {
      $('#yellow').toggleClass('d-none');
    }

    function showDivBlue() {
      $('#blue').toggleClass('d-none');
    }
  </script>
  <ul id="filteringSidebar">


    <button class="btn btn-success" id="btnGreen" onclick="showDivGreen();" value="green"><li>Color Is Green</li> </button>
    <button class="btn btn-warning" id="btnYellow" onclick="showDivYellow();" value="yellow"><li>Color Is Yellow</li>
<button class="btn btn-primary" id="btnBlue" onclick="showDivBlue();" value="blue"><li>Color Is Blue</li>


</ul>

<div class="row">

<div id="blue" class="bg bg-primary col-md-4 hidden d-none " > Blue </div>
<div id="yellow"   class="bg bg-warning  col-md-4 d-none" > Yellow </div>
<div  id="green"   class="bg bg-success col-md-4 d-none" > Green </div>


</div>
</div>


</body>
</html>

【讨论】：