时间戳

首页 > 解决方案 > 如何在 Materialise CSS 中过滤卡片

javascript - 如何在 Materialise CSS 中过滤卡片

问题描述

我有很多应用程序，所以我正在尝试用 html 编写代码。我想通过物化CSS过滤卡片，但我不明白我写的代码在哪里不起作用。你能帮我纠正这个吗？

如果文章不理解，请见谅。谷歌翻译 ：）

daha ne yazıyım yazdım işte yazacağımı kabul eder misin artık

function myFunction() {
  var input, filter, cards, cardContainer, h5, title, i;
  input = document.getElementById("myFilter");
  filter = input.value.toUpperCase();
  cardContainer = document.getElementById("myItems");
  cards = cardContainer.getElementsByClassName("card");
  for (i = 0; i < card.length; i++) {
    title = cards[i].querySelector(".card-content h5.card-title");
    if (title.innerText.toUpperCase().indexOf(filter) > -1) {
      cards[i].style.display = "";
    } else {
      cards[i].style.display = "none";
    }
  }
}
<div class="container">
  <div class="row">
    <div class="col-sm-12 mb-3">
      <input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for names..">
    </div>
  </div>


  <div class="row" id="myItems">

    <div class="row">
      <div class="col s6">
        <div class="card">
          <div class="card-image waves-block waves-light">
            <img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/izncB6dCLV7LBQ5MsOPyMx9mUDa.jpg">
          </div>
          <div class="card-content">
            <center>
              <h5 class="card-title">How i Met Your Mother</h5>
            </center>
          </div>
        </div>
      </div>

      <div class="col s6">
        <div class="card">
          <div class="card-image waves-block waves-light">
            <img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/A9QDK4OWpv41W27kCv0LXe30k9S.jpg">
          </div>
          <div class="card-content">
            <center>
              <h5 class="card-title">Two and a Half Men</h5>
            </center>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col s6">
        <div class="card">
          <div class="card-image waves-block waves-light">
            <img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/w7VV1jdtwzEC0c71AjUUA4T65Az.jpg">
          </div>
          <div class="card-content">
            <center>
              <h5 class="card-title">Seinfeld</h5>
            </center>
          </div>
        </div>
      </div>

      <div class="col s6">
        <div class="card">
          <div class="card-image waves-block waves-light">
            <img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/x40NhjIPoDoTbT0z2utFgIedtwh.jpg">
          </div>
          <div class="card-content">
            <center>
              <h5 class="card-title">Scrubs</h5>
            </center>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col s6">
        <div class="card">
          <div class="card-image waves-block waves-light">
            <img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/ooBGRQBdbGzBxAVfExiO8r7kloA.jpg">
          </div>
          <div class="card-content">
            <h5 class="card-title">Big Bang</h5>
          </div>
        </div>
      </div>

      <div class="col s6">

      </div>

    </div>
    </di>


    <style>
      body {
        background-color: #222731;
      }
    </style>

标签： javascriptjqueryhtml

解决方案

你的for循环中有一个错误，你使用写的card.length而不是cards.length：

for (i = 0; i < cards.length; i++) {
    title = cards[i].querySelector(".card-content h5.card-title");
    if (title.innerText.toUpperCase().indexOf(filter) > -1) {
        cards[i].style.display = "";
    } else {
         cards[i].style.display = "none";
    }
}

推荐阅读