如何在 Materialise CSS 中过滤卡片

Question

我有多个应用程序，所以我试图在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>

Answer 1

你的 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";
    }
}