如何过滤html中的项目？答案

【问题标题】：How to filter items in html?如何过滤html中的项目？
【发布时间】：2021-02-18 08:17:18
【问题描述】：

我在 html 中有以下代码

function FilterCard(filter) {
  event.preventDefault();
  var classList = document.getElementsByClassName("collapse");
  if (filter === 'All') {
    for (let i = 0; i < classList.length; i++) {
      classList[i].className = "collapse show";
      var childCards = classList[i].firstElementChild.children;
      for (let j = 0; j < childCards.length; j++) {
        childCards[j].style.display = "inline-flex";
      }
    }
  } else {
    for (let i = 0; i < classList.length; i++) {
      if (classList[i].className === "collapse show") {
        var childCards = classList[i].firstElementChild.children;
        console.log(childCards);
        var count = 0;
        for (let j = 0; j < childCards.length; j++) {
          var card = childCards[j].firstElementChild.firstElementChild;
          if (card.innerText !== filter) {
            childCards[j].style.display = "none";
            count++;
          } else {
            childCards[j].style.display = "inline-flex";
          }
        }
        if (count == childCards.length) {
          classList[i].className = "collapse";
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
  .card-body .card {
    margin: 5px;
    width: 18rem;
  }
  
  .card {
    display: inline-flex;
    margin: 5px;
    width: 100%;
  }
</style>
<div class="container-fluid text-center">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Filter Card
                </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" onclick="FilterCard('All')">All</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card1')">Card1</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card2')">Card2</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card3')">Card3</a>
    </div>
  </div>
</div>
<div class="container">
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card2</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse show" aria-labelledby="headingThree">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

现在我想做的是根据卡片的标题过滤卡片，即 Card1 ， Card2 等等。如果 Collapsible Group 已折叠，则过滤器不应显示该组的过滤内容。

例如，如果我有 Collapsible Item #2 collapsed ，并且我选择 card3 作为我的过滤器，那么我应该只会看到 Collapsible item 1 和 3，其中只有 card3 可见，如果有的话，Collapsible item#2 应该保持折叠状态。如果展开的项目没有那个过滤器，那么项目应该会自动折叠。如何使用 Jquery 或 Javascript 实现这一点？

【问题讨论】：

这是您想要得到的答案吗？ w3schools.com/howto/howto_js_filter_dropdown.asp
到目前为止你尝试过什么？您是否尝试选择项目，折叠其他项目？你到底卡在哪里了？
我已经添加了到目前为止我尝试过的代码。它似乎有效，但现在我面临的问题是，当我在应用过滤器后尝试展开折叠的项目时，我在展开的项目中看不到任何东西

标签： javascript html jquery

【解决方案1】：

自上次以来您已经修改了您的 html，我已经在 您的第一个版本上工作了。

你已经在你的 html 代码中添加了一个过滤功能，这段代码做同样的事情：（除了所有）

$("div.dropdown-menu .dropdown-item").on('click', function(){
  collapse($(this).text());
});

我已经修改了你的代码以概括它：要隐藏一个项目，你必须删除类 show ，但还要将类 collapsed 添加到链接按钮

var cardsToHide=[];
var obj=[];

$("#dropdownMenuButton").on('click', function(){
  cardsToHide=[];obj=[];
  cardsToCollect();
  //console.log(obj);
});
$("div.dropdown-menu .dropdown-item").on('click', function(){
  collapse($(this).text());
});


function cardsToCollect(){
  $("button.btn-link[data-target^='#collapse']").each(function(){
    var o = {};
    var key = $(this).attr("data-target");
    o.hide = $(this).hasClass("collapsed") ? true : false;
    o[key]=[]; 
    $(this).closest('div[class="card"]').find('h5.card-title').each(function(){
     let v = $(this).text();
     o[key].push(v);
     if(o.hide && !cardsToHide.includes(v)) cardsToHide.push(v);
    });
    obj.push(o);    
  });
}

function collapse(txt){
  for(let i = 0; i < obj.length; i++){
    if(obj[i].hide)continue;
    let nameofKey = Object.keys(obj[i])[1];

    let re = new RegExp("^.+\\[");
    var json = JSON.stringify(obj[i]).replace(re, '');

    if(json.includes(txt))continue;

    $("button.btn-link[data-target='" + nameofKey + "']").addClass("collapsed");
    $(nameofKey).removeClass("show");   
  }//for i
}

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <style>
            .card-body .card {
                margin: 5px;
                width: 18rem;
            }
            .card {
                display: inline-flex;
                margin: 5px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid text-center">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Filter Card
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Card1</a>
                  <a class="dropdown-item" href="#">Card2</a>
                  <a class="dropdown-item" href="#">Card3</a>
                </div>
            </div>
        </div>
        <div class="container">
            <div id="accordion">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </button>
                        </h5>
                    </div>
              
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                        <div class="card-body">
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card1</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card2</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </button>
                        </h5>
                    </div>
                    <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                        <div class="card-body">
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card3</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card1</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </button>
                        </h5>
                    </div>
                    <div id="collapseThree" class="collapse show" aria-labelledby="headingThree">
                        <div class="card-body">
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card1</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Card3</h5>
                                  <p class="card-text">Card Content Goes Here</p>
                                  <a href="#" class="card-link">Link1</a>
                                  <a href="#" class="card-link">Link2</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    </body>
</html>

您的代码在折叠时隐藏，但是当您单击按钮以显示项目时..您必须捕获单击按钮链接以修改您的 css 属性。这就是使用类更容易的原因

【讨论】：

我在本地尝试过，但没有任何反应
你在这里测试过我的代码吗？ sn-p 是您的第一个 html 的副本。（没有点击过滤功能）。只需打开所有项目。如果选择 card2，则 item 2 和 item 3 折叠
我在您的代码的一点帮助和我自己的一些修改下完成了它。