使用 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";
}
}
}
};