Question

因此，当我想找出如何在网站的下拉框中放置搜索栏时，在w3学校中找到了此代码。但是，我根本无法理解代码的工作原理。每当我觉得自己接近理解时，我都会感到困惑

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
   }
}

因此，我知道“ a”是我所有元素的列表，并且第一个元素的值为0，然后是1、2、3等。我不理解如何检索要m放入框中，以及如何过滤。因此，在txtValue字符串中，它将文本更改为大写，但是如何获取文本，然后如何知道要过滤的内容。另外，我对-1非常困惑。如果有人可以帮助我理解我，我将不胜感激。

Answer 1

代码的功能

您发布的代码在a中的元素上循环，并检查每个元素的文本内容（textContent还是innerText）是否包含给定的filter值，如下所示：一个子字符串。 filter的值来自输入元素filter。如果元素的文本确实包含filter作为子字符串，则该元素的CSS显示值设置为""（默认值），否则通过将其CSS显示值设置为{{1}来隐藏该元素}。

例如，如果您具有a元素：

"none"

并将<a href="http://a.com">Great Site</a> <a href="http://b.com">Okay Site</a> <a href="http://c.com">Great Website</a>输入到过滤器输入中。第一个和最后一个元素的CSS显示属性将设置为"great"，因此将保持可见。而中间元素的显示设置为""并被隐藏。

indexOf

JavaScript中的"none"方法返回给定元素在数组或字符串中首次出现的索引。例如，indexOf返回'abcb'.indexOf('b')。如果在数组中找不到该元素，则1返回indexOf。

所以这行：

-1

真的只是检查if (txtValue.toUpperCase().indexOf(filter) > -1) {是否是filter的子字符串。

获得相同功能的一种更直接的方法是使用txtValue方法。例如：

includes

还请注意，if (txtValue.toUpperCase().includes(filter)) {的调用仅以不区分大小写的方式执行，以执行子字符串搜索，因此toUpperCase将与"Hello"相匹配。

Answer 2

但是如何获取文字

txtValue = a[i].textContent || a[i].innerText

这将从外部循环中的当前项目获取文本。循环实质上遍历了下拉列表中的所有元素。请注意，如果textContent为空，它将使用innerText属性。

然后知道如何过滤

if (txtValue.toUpperCase().indexOf(filter) > -1)

在此行中，filter的值是搜索字符串（大写）。 txtValue.toUpperCase（）的值是上方的文本值（大写）。

以下是w3schools中的indexOf（）函数的作用：

indexOf（）方法返回字符串中第一次出现指定值的位置。

如果永远不会出现要搜索的值，则此方法返回-1。

注意：indexOf（）方法区分大小写。

提示：还要看看lastIndexOf（）方法。

因此，从本质上讲，您正在txtValue中搜索filter的值，如果找不到，它将在列表中隐藏该项目。

Answer 3

在上面的代码变量a中保存了文档（<a>...</a>）中的所有锚标记元素。由于变量a是一个数组，并且在javascript中，可以使用从0开始的索引访问数组中的值。

我们正在使用for循环来迭代数组，并且在每次迭代中我们都访问

txtValue = a[i].textContent || a[i].innerText;

通过访问数组a来

txtValue，并使用字符串函数indexOf检查是否匹配。如果找到匹配项，则会在字符串中给出匹配项索引（> = 0）的位置，否则为-1

我正在尝试了解indexOf

3 个答案: