如何使用javascript正確按卡片過濾專案？

如何使用javascript制作搜索過濾器？我正在努力做到這一點，但我沒有成功。

這是我輸入的用于搜索特定構建器的按鈕

我的目標是通過將特定構建器的名稱放在搜索過濾器中來使用卡片上的專案創建過濾器。

這是我的 javascript

  function searchProduct(){
       const input = document.getElementById('filter').value.toUpperCase();

       const cardContainer = document.getElementById('card-list');
       console.log(cardContainer);

       const cards = cardContainer.getElementByClassName('card');
       console.log(cards);

       for(let i = 0; i < cards.length; i  ){
        let title = cards[i].querySelector(".body h5.card-title");

        console.log(title);

        if(title.innerText.toUpperCase().indexOf(input) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }

}

And this is my html code

<div class="row">
    <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
        <input type="text" id="filter" onkeyup="searchProduct()" placeholder="ME INFORME O NOME DA CONSTRUTORA ...">
    </div>
</div><br>


<div id="card-list">

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ADSM</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div>

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ALFA DO BRASIL</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div
  
</div>

uj5u.com熱心網友回復：

嘗試

title.innerText.toUpperCase().indexOf(input) > -1

而不是 title.interText

uj5u.com熱心網友回復：

控制臺錯誤可以指出問題所在。

而不是使用getElementById，getElementsByClassName你可以querySelector像這樣的卡片：document.querySelectorAll('#card-list .card');

作業片段：

function searchProduct(){
       const input = document.getElementById('filter').value.toUpperCase();

       //const cardContainer = document.getElementById('card-list');
       //console.log(cardContainer);

       //const cards = cardContainer.getElementByClassName('card');
       //console.log(cards);
       const cards = document.querySelectorAll('#card-list .card');
       for(let i = 0; i < cards.length; i  ){
        let title = cards[i].querySelector(".body h5.card-title");

        console.log(title);

        if(title.innerText.toUpperCase().indexOf(input) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }

}

And this is my html code

<div class="row">
    <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
        <input type="text" id="filter" onkeyup="searchProduct()" placeholder="ME INFORME O NOME DA CONSTRUTORA ...">
    </div>
</div><br>


<div id="card-list">

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ADSM</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div>

  <div class="col-lg-2 col-md-3">
      <div class="card hvr-grow cbox">
          <div class="body">
          <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div>
          <h5 class="card-title">ALFA DO BRASIL</h5>
          <div class="card-footer">21/10/2021</div>
              <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a>
          </div>
      </div>
  </div
  
</div>

在此處閱讀更多資訊：https : //developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

uj5u.com熱心網友回復：

我這樣解決了這個問題

function searchConstrutora() {
        const input = document.getElementById('filter').value.toUpperCase();

        const cardContainer = document.getElementById('card-list');
        console.log(cardContainer);

        const cards = cardContainer.getElementsByClassName('card');
        console.log(cards);

        for(let i = 0; i < cards.length; i  ) {
            let title = cards[i].querySelector(".card-body h5.card-title");
            console.log(title);

            if(title.innerText.toUpperCase().indexOf(input) > -1) {
                cards[i].style.display = "";
            } else {
                cards[i].style.display = "none";
            }

        }
    }

標籤：javascript html css

上一篇：將物件的值更改為Long

下一篇：第17:20行：'count'未定義no-undef