下面是我在 div 中显示匹配的用户输入的代码,但我想在用户输入不匹配时隐藏 div。我似乎无法使用以下代码来做到这一点:
HTML 代码:
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc"> <p id='placeholder'> </p> </div>
JS代码:
// JavaScript Document
s1= new String()
s2= new String()
var myArray = new Array();
myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
myArray[3] = "Hockey";
myArray[4] = "Basketball";
myArray[5] = "Shooting";
function test()
{
s1 = document.getElementById('filter').value;
var myRegex = new RegExp((s1),"ig");
arraysearch(myRegex);
}
function arraysearch(myRegex)
{
document.getElementById('placeholder').innerHTML="";
for(i=0; i<myArray.length; i++)
{
if (myArray[i].match(myRegex))
{
document.getElementById('lc').style.visibility='visible';
document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>";
}
else
{
document.getElementById('lc').style.visibility='hidden';
}
}
}
最佳答案
正则表达式是一个强大的工具,但是使用它们来完成如此琐碎的工作通常很麻烦。首先,您使用直接输入作为正则表达式,这从来都不是那么好。
我复制了您的代码并分析了您犯下的许多错误的逻辑
for(i=0; i<myArray.length; i++)
{
if (myArray[i].match(myRegex))
{
document.getElementById('lc').style.visibility='visible';
document.getElementById('placeholder').innerHTML += myArray[i] + "<br/>";
}
else
{
document.getElementById('lc').style.visibility='hidden';
}
考虑上面的代码,如果我输入足球,它会与足球匹配,并显示足球。 接下来它会检查不匹配的棒球,并且可见性更改为隐藏!!
更好的逻辑
1.检查哪些字符串匹配,并将它们添加到分区中。
2.检查有多少个字符串匹配,如果没有,则将可见性更改为隐藏。
您正在使用正则表达式,而这实际上可以通过indexOf()轻松实现;
这些纯粹是逻辑错误
关于javascript - 使用javascript隐藏div元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12607547/