用javascript隱藏div元素

以下是我在div中顯示匹配用戶輸入的代碼，但是我想在沒有用戶輸入匹配時隱藏div。我似乎無法用下面的代碼來做到這一點：用javascript隱藏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'; 
    } 
} 

    }

來源

2012-09-26 Komal Waseem

第一次添加一些警報，並嘗試查看代碼出錯的確切位置。啓動javascript控制檯查看錯誤。 – geekman

如果您使用的是舊版本的IE。使用var – geekman

正則表達式是一個功能強大的工具，所以瑣碎但使用起來工作經常是麻煩的。首先，你使用直接輸入作爲正則表達式，這從來沒有好過。

我複製你的代碼和分析邏輯，你正在許多許多錯誤

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. 檢查有多少個字符串匹配，如果沒有，則將可見性更改爲隱藏。

你正在使用正則表達式，當這個actully可以通過indexOf（）方便地實現時;

這些都是純粹的邏輯錯誤

來源

2012-09-26 18:08:56 geekman

嚴格聲明變量是的，只是想出了愚蠢的錯誤。添加了一個標誌來檢查是否找到任何匹配。現在正常工作！ –

考慮使用jQuery。（有一點http://underscorejs.org/實用程序）

 
var myArray = ["Football", "Baseball", "Cricket","Hockey", "Basketball", "Shooting"] 

$("#filter").keyup(function() { 
    if(_.include(myArray, $(this).val()) { 
    $('#lc').show() 
    } else { 
    $('#lc').hide() 
    } 
}

來源

2012-09-26 18:17:21

用javascript隱藏div元素

回答

相關問題