Как отфильтровать карты в Materialise CSS - PullRequest
1 голос
/ 14 апреля 2020

У меня есть несколько приложений, поэтому я пытаюсь написать код на html. Я хочу отфильтровать карточки по материализованному CSS, но я не понял, где не работает код, который я написал. Можете ли вы помочь мне исправить это?

Извините, если статья не понята. гугл переводчик:)

да не язым язд иште язачагыми кабул эдер мисин артык

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>

1 Ответ

1 голос
/ 14 апреля 2020

В вашем for-l oop есть ошибка, вы используете вместо 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";
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...