javascript - 使用javascript隐藏div元素

Question

下面是我在 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';
    }
}

    }

Answer 1

正则表达式是一个强大的工具，但是使用它们来完成如此琐碎的工作通常很麻烦。首先，您使用直接输入作为正则表达式，这从来都不是那么好。

我复制了您的代码并分析了您犯下的许多错误的逻辑

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()轻松实现；

这些纯粹是逻辑错误