Javascript 当文本框为空时隐藏元素

如果文本框为空，我无法隐藏

myUL li

元素。有什么想法吗？提前谢谢

函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

要在输入为空时隐藏元素，可以在检查用户是否输入了值的

if

条件中包含

过滤器

值

还请注意，可以通过使用不引人注目的事件监听器、

输入

事件和一些ES5方法来改进和简化代码：

document.querySelector（'#myInput'）.addEventListener（'input'，（）=>{
让filter=document.querySelector（'#myInput'）.value.toUpperCase（）；
document.queryselectoral（“#myUL li”）.forEach（el=>{
设a=el.querySelector（'a'）；//仅获取第一个
el.style.display=filter&（a.textContent | | a.innerText）.toUpperCase（）.indexOf（filter）！=-1？“列表项”：“无”；
});
});
li{display:none；}





这是我的版本

当存在ID和带“#ID li”的复合选择器时，我更喜欢使用getElementById

此外，我还在HTMLCollection上使用spread操作符，因为较旧的边缘浏览器在HTMLCollection上没有forEach

事实证明IE11也支持这一点，因此这里的版本比我最后的第一个示例还要短


document.getElementById（'myInput'）。addEventListener（'input'，e=>{
让输入=e.目标；
让filter=input.value.toUpperCase（）；
让li=document.queryselectoral（'myUL li'）；
[…li].forEach（el=>{
const a=el.querySelector（'a'）；//仅获取第一个
const text=a.textContent.toUpperCase（）；
const show=filter&&text.includes（filter）；
隐藏=！显示；
});
});





在ID上使用querySelector的具体原因是什么？使用两个QuerySelector/All获取“#myInput li”？一个更简单的版本是很好的观点。我盲目地将OP最初的两行代码组合在一起，没有考虑任何改进。更新，谢谢您可能想在
显示：无
和
显示：列表项
之间切换。不过，我宁愿使用
el.hidden
。@connexo切换隐藏和切换显示：无和列表项之间的视觉区别是什么？@mplungjan没有视觉区别，我只是更喜欢使用现有API而不是复制它。我更喜欢
el.hidden=！（filter&&text.includes（filter））
@connexo我想说classList.toggle更受支持，但实际上IE11也支持hidden-因此请参见更新您的第一个代码示例仍然有
.hide
，但没有使用它。同样不需要扩展，支持扩展的浏览器也支持
NodeList上的
forEach
。@connexo旧边缘支持扩展，但不支持节点列表上的forEach