使用JavaScript过滤基于两个变量的卡片

Question

我从MySQL数据库填充了多张卡片。我想允许实时搜索根据帐号和用户名过滤卡片。我尝试了以下代码，但它没有用。请指教。使用的JS代码是W3教程中的典型代码，适合我的代码。

function Function() {
    // Declare variables
    var input, filter, div, carddiv, acc, name, i;
    input = document.getElementById("BankSearch");
    filter = input.value.toUpperCase();
    div = document.getElementById("Bank-Approval");
 carddiv = div.children();
 
    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < carddiv.length; i++) {
        acc = carddiv[i].getElementsByTagName("div")[0].getElementsByTagName("div")[0].getElementsByTagName("h1")[0];
  name = carddiv[i].getElementsByTagName("div")[1].getElementsByTagName("div")[0].getElementsByTagName("h1")[0];
        if (acc.innerHTML.toUpperCase().indexOf(filter) > -1) {
            carddiv[i].show();
        } else {
    if (name.innerHTML.toUpperCase().indexOf(filter) > -1) {
            carddiv[i].show();
        } else {
   carddiv[i].hide();
        }
        }
    }
}

<div class="tab-content tab-space">
 <div id="Bank-Approval" class="collapse show" data-parent="#accordion" >
<!--Search CODE -->
  <span class="bmd-form-group">
   <div class="input-group">
    <input class="form-control" placeholder="Search" maxlength="100" id="BankSearch" onkeyup="Function()" type="text">  
     <div class="input-group-prepend">
      <span class="input-group-text">       
       <i class="material-icons">search</i>
      </span>
     </div>
   </div>
  </span>
<!--Search CODE -->
<!--1st Card CODE -->
  <div class="card">
   <div class="card-header">
    <div id="Account Number">
     <h1>44444444444</h1>
    </div>
   </div>
   <div class="card-body">
    <div id="Name">
     <h1>XXXXXXX</h1>
    </div>
    <div id="Bank">
     <i src="banklogo/XXX.png"  width="80%" height="80%"></i>
    </div>
    <form >
     <input name="bank" value="XXX" type="hidden">
    </form>
    <button>Add</button>
    <button>Hide</button>
    <div id="Since">
     <h1>2 days ago</h1>
    </div>
   </div>
  </div>
<!--1st Card CODE -->
<!--2nd Card CODE -->
  <div class="card">
   <div class="card-header">
    <div id="Account Number">
     <h1>2222222222</h1>
    </div>
   </div>
   <div class="card-body">
    <div id="Name">
     <h1>YYYYYYY</h1>
    </div>
    <div id="Bank">
     <i src="banklogo/XXX.png"  width="80%" height="80%"></i>
    </div>
    <form >
     <input name="bank" value="XXX" type="hidden">
    </form>
    <button>Add</button>
    <button>Hide</button>
    <div id="Since">
     <h1>4 days ago</h1>
    </div>
   </div>
  </div>
<!--2nd Card CODE -->
 </div>
</div>

例如，仅显示两张牌，它会更多。

Answer 1

看起来你可能在没有引用它的情况下混合使用jQuery语法。有不同的方法来处理这个问题，但更好的选择可能是按类名选择卡片（参见标记为/ **的其他注释）

function Function() {
  // Declare variables
  var input, filter, div, carddiv, acc, name, i;
  input = document.getElementById("BankSearch");
  filter = input.value.toUpperCase();

  div = document.getElementById("Bank-Approval");
  carddiv = div.getElementsByClassName("card"); //** Select by class

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < carddiv.length; i++) {
    //** Select specific parent element. innerText will return text in child h1.
    acc = carddiv[i].querySelector("[id='Account Number']").innerText;
    name = carddiv[i].querySelector("[id='Name']").innerText;

    if (acc.toUpperCase().indexOf(filter) > -1) {
      carddiv[i].style.display = "block"; //** .hide()/.show() is not supported
    } else {
      if (name.toUpperCase().indexOf(filter) > -1) {
        carddiv[i].style.display = "block";
      } else {
        carddiv[i].style.display = "none";
      }
    }
  }
};