Question

我正在尝试创建一个搜索栏，以允许用户搜索一系列项目。我正在使用span元素作为过滤器，但是由于某种原因，我无法获取要分配给变量的元素内容。

这是一个非常简单的设置。

我抓取包装列表的类的内容，然后抓取每个span元素。出于理智的考虑，我console.log跨度元素以确保被捕获（被捕获）。

然后，我尝试获取其中的文本内容，并将其分配给txtValue变量，然后继续对过滤器进行比较检查。

我将其分配给文本值的部分是发生错误的地方，它似乎没有抓住内部文本。也许我要解决这个错误？

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  console.log(content);
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content.innerHTML;
      console.log(textValue);
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class="search-bar">
  <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers">
</div>

<div id="search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>

Answer 1

内容是一个节点列表，您需要访问索引才能访问节点
您在使用txtValue的控制台中将变量定义为textValue

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content[i].innerHTML;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class="search-bar">
  <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers">
</div>

<div id="search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>

Answer 2

也许您需要使用：

txtValue = content [i] .innerHTML;

试图获取span元素的内部文本内容

2 个答案: