javascript點擊一個文本，它會過濾一個隱藏的列表彈出

我想點擊一個單詞，然後它將作爲一個過濾器來顯示隱藏的列表。我的代碼是，但它不起作用，有人可以告訴我我的腳本有什麼問題。其實這就是我所尋找的：在網頁中，有一些隱藏的列表，有打開的列表，當我點擊打開列表上的一個項目時，它將作爲一個過濾器來過濾隱藏的列表和流行過濾清單。：javascript點擊一個文本，它會過濾一個隱藏的列表彈出

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
</head> 
 
<body> 
 
<h2>My Phonebook</h2> 
 

 
<div id="myInput" onclick="myFunction()"> 
 

 
<li>Adele</li> 
 
<li>Agnes</li> 
 
<li>Billy</li> 
 
<li>Bob</li> 
 

 

 
</div> 
 
<div style="display:none" id="myDIV"> 
 
<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> 
 

 
</ul> 
 
</div> 
 

 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById('myDIV'); 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
    
 
    var input1, input, filter, ul, li, a, i; 
 
    input1 = document.getElementById("myInput"); 
 
    input = input1.getElementByTagName("li"); 
 
    filter = input.innerHTML.toUpperCase(); 
 
    
 
    
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
     a = li[i].getElementsByTagName("a")[0]; 
 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      li[i].style.display = ""; 
 
     } else { 
 
      li[i].style.display = "none"; 
 

 
     } 
 
    } 
 
} 
 
    
 
</script> 
 
</body> 
 
</html>

來源

2017-06-14 Frank

請按F12並修正控制檯中的錯誤 - getElementsByTagname爲複數 – mplungjan

使用querySelector：'input = input1.querySelector（「li」）;' – kotapeter

使用querySelectorAll到快捷
添加點擊處理到第一LIS，而不是到div
保存點擊名稱即可切換顯示
總結UL中的LI創建有效的HTML

個

var saveFilter = ""; 
 
window.onload = function() { 
 
    var triggers = document.querySelectorAll("#myInput>ul>li"); 
 
    for (var i = 0; i < triggers.length; i++) { 
 
    triggers[i].onclick = function() { 
 
     var myDiv = document.getElementById('myDIV'), 
 
     filter = this.innerText.toUpperCase(); 
 
     if (saveFilter === filter) { 
 
     myDiv.style.display = myDiv.style.display == "none" ? "block" : "none"; 
 
     } else { 
 
     myDiv.style.display = "block"; // new name 
 
     } 
 
     saveFilter = filter; 
 

 
     var li = document.querySelectorAll("#myUL>li"); 
 
     for (i = 0; i < li.length; i++) { 
 
     var a = li[i].getElementsByTagName("a")[0]; 
 
     li[i].style.display = a.innerHTML.toUpperCase().indexOf(filter) > -1 ? "" : "none"; 
 
     } 
 
    } 
 
    } 
 
}

<h2>My Phonebook</h2> 
 

 
<div id="myInput"> 
 
    <ul> 
 
    <li>Adele</li> 
 
    <li>Agnes</li> 
 
    <li>Billy</li> 
 
    <li>Bob</li> 
 
    </ul> 
 

 
</div> 
 
<div style="display:none" id="myDIV"> 
 
    <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> 
 

 
    </ul> 
 
</div>

來源

2017-06-14 12:17:08 mplungjan

非常感謝，它的工作原理。如果我想彈出過濾內容？

來源

2017-06-14 13:21:50 Frank

javascript點擊一個文本，它會過濾一個隱藏的列表彈出

回答

相關問題