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

Question

I have a number of applications, so I am trying to write code in html. I want to filter the cards through materialized CSS, but I did not understand where the code I wrote did not work. Can you help me correct this?

抱歉，如果这篇文章没有被理解。 谷歌翻译:)

daha ne yazıyım yazdım iste 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>

Answer 1

你的for循环中有一个错误，你使用了card.length而不是card.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";
    }
}