Question

我想点击一个单词，然后它将充当过滤器以显示隐藏列表。我的代码是，但它不起作用，有人可以告诉我我的脚本有什么问题。事实上，这就是我要找的：在网页上，有一些隐藏的列表，有开放列表，当我点击打开列表中的一个项目时，它将充当过滤器来过滤隐藏列表并弹出过滤后的清单。：

<!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>

Answer 1

使用querySelectorAll快捷方式
将点击处理程序添加到第一个LI而不是div
保存点击的名称以切换显示
将LI包裹在UL中以创建有效的HTML

＆＃13;

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";
      }
    }
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

非常感谢，它有效。如果我想在弹出窗口中显示过滤后的内容？

javascript单击一个文本，它将过滤隐藏列表以弹出

2 个答案: