如果我只有类，如何声明 javascript 搜索功能？答案

【问题标题】：How do I declare javascript search function if i only have class?如果我只有类，如何声明 javascript 搜索功能？
【发布时间】：2017-11-22 03:44:26
【问题描述】：

我想声明 javascript 以基于 div 类进行搜索，但是我可以指定代码。下面是我使用的javascript代码。

function searchFunction()() {
  var input, filter, div, a;
  input = document.getElementById('myinput');
  filter = input.value.toUpperCase();
  div = document.getElementByClassName('panel panel-default')
  a = document.getElementsByTagName('accordion-toggle')

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

标题

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="faqHeader">
      <font color="#008080"><strong><code class="border-rounded">General Questions</strong>
        <p style="text-align:center">
          </code>
      </font>
    </div>

我声明的搜索功能

    <input type="text" name="search" value="" autocomplete="off" id="myinput" onkeypress="searchFunction()" placeholder="Search...">

我在搜索框中输入时要搜索的内容

    <Form>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><strong>What do you like?</strong></a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <p>I like potato</p>
          </div>
        </div>
      </div>
    </form>

【问题讨论】：

您是否看到有关 getElementByClassName 的错误，它应该是 getElementsByClassName ... 请参阅 documentation 了解它的返回和用法
你也设置了a = document.getElementsByTagName('accordion-toggle') ...然后for (i = 0; i < li.length; i++) { a = li[i] ...li没有定义，a的第一个值从未使用过-这些东西会出现在浏览器开发者工具控制台
for(i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; 我应该用for (i = 0; i < div.length; i++) { a = div[i].getElementsByClassName("a")[0]; 代替它吗？？
是的，我知道，就是我说的代码看起来不对，还是不对……未声明的变量li怎么有长度？

标签： javascript html

【解决方案1】：

你可以使用queryselector，这样：

document.querySelector(".some_class");

【讨论】：