清除輸入后，我正試圖找回所有原始的 li。問題是 .value = '' 清除了輸入，但仍應用了過濾器。
我很感激這方面的幫助，這讓我發瘋了。
（我洗掉了 CSS，但你仍然可以得到一個不錯的主意，謝謝）
var myInput = document.getElementById('myInput');
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i ) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var h2 = document.getElementById('hh');
h2.addEventListener('click', clear);
function clear() {
myInput.value = '';
}<h2 id="hh">Click here to empty input</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>uj5u.com熱心網友回復：
過濾器本身沒有“應用”，它是它的后果。
當您查看您的代碼時，您會發現您在某個時間點設定為與您display: none的<li>過濾器不匹配的代碼。
您的函式重置輸入的值，而不會反轉您通過應用clear()所做的更改。<li>display: none
您必須通過迭代相同的陣列并反轉對屬性所做的更改來使您的clear()函式也洗掉存盤在陣列display: none中的所有內容。<li>display
const myInput = document.getElementById('myInput');
const ul = document.getElementById("myUL");
const list = ul.children
function myFunction() {
const input = document.getElementById("myInput");
const filter = input.value.toUpperCase();
for (i = 0; i < list.length; i ) {
const a = list[i].getElementsByTagName("a")[0];
const txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
list[i].style.display = "";
} else {
list[i].style.display = "none";
}
}
}
var h2 = document.getElementById('hh');
h2.addEventListener('click', clear);
function clear() {
for(i = 0; i < list.length; i ) {
list[i].style.display = "";
}
myInput.value = '';
}
而不是 using ul.getElementsByTagName("li")，您應該像我上面那樣使用ul.children，它將所選父項的子項存盤到一個陣列中，而 an 的子項<ul>本質上是 all <li>，所以。
上面的代碼可以正常作業并根據需要清除過濾器。我建議您不要使用var，const, let這樣可以防止在整個代碼中操作變數時出現許多錯誤。請考慮他們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/462398.html
標籤：javascript html 筛选
上一篇：編輯資料標題的樣式，例如位置