列表过滤器不起作用

Question

我想为列表创建一个过滤器，该列表仅显示与 <select> 中给定值（“0”或“1”）匹配的列表元素。

function filterElements() {
 var select = document.getElementById("select");
 var filter = select.value;
 var list = document.getElementById("listElements");
 var elements = list.getElementsByTagName("li");
 var valueElement;
 for (var i = 0; i < elements.length; i++) {
  valueElement = elements[i].value;
  console.log("filter : "+filter+" ; value : "+valueElement+" ; equal : "+(valueElement===filter));
  if (valueElement === filter)
            elements[i].style.display = "";
  else elements[i].style.display = "none";
 }
}

<select id="select" onchange="filterElements()">
 <option value="1">Value 1</option>
 <option value="0">Value 0</option>
</select>

<ul id="listElements">
 <li value="1">Element 1</li>
 <li value="0">Element 2</li>
 <li value="1">Element 3</li>
 <li value="0">Element 4</li>
</ul>

当我比较过滤器的值和列表元素的值时，即使它们都是“0”或都是“1”，它总是在控制台中打印 "false"。我哪里弄错了？

感谢您的帮助。

Answer 1

因为typeof filter是string而typeof valueElement是Number。所以 === 给出 false.

function filterElements() {
 var select = document.getElementById("select");
 var filter = select.value;
 var list = document.getElementById("listElements");
 var elements = list.getElementsByTagName("li");
 var valueElement;
 for (var i = 0; i < elements.length; i++) {
  valueElement = elements[i].value;
  console.log("filter : "+typeof filter+" ; value : "+typeof valueElement+" ; equal : "+(valueElement==filter));
  if (valueElement == filter)
            elements[i].style.display = "";
  else elements[i].style.display = "none";
 }
}

<select id="select" onchange="filterElements()">
 <option value="1">Value 1</option>
 <option value="0">Value 0</option>
</select>

<ul id="listElements">
 <li value="1">Element 1</li>
 <li value="0">Element 2</li>
 <li value="1">Element 3</li>
 <li value="0">Element 4</li>
</ul>

li 值为数字的原因是

The value attribute sets the value of a list item. The following list items will increment from that number.

The value must be a number and can only be used in ordered lists

有关详细信息，请参阅 this

Answer 2

function filterElements() {
 var select = document.getElementById("select");
 var filter = select.value;
 var list = document.getElementById("listElements");
 var elements = list.getElementsByTagName("li");
 var valueElement;
 for (var i = 0; i < elements.length; i++) {
    valueElement = elements[i].value;
    console.log("filter : "+filter+" ; value : "+valueElement+" ; equal : "+(valueElement==filter));
    if (valueElement == filter)
        elements[i].style.display = "";
    else elements[i].style.display = "none";
 }
}

=== 也会检查类型。所以你必须使用 == ，或者你可以键入转换值然后使用 ===

Answer 3

我错误地假设 LI 没有值属性，但它们有，而且它是一个整数，但它用于（重新）编号有序列表而不是作为数据属性。

value This integer attribute indicates the current ordinal value of the list item as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists (<ul>) or for menus (<menu>).

用一个data-attributeHTML的世界又好了:

这里它们都是字符串 - 或者使用 == 而不是 === 来免费但以一种可以理解的方式进行类型转换：

function filterElements() {
  var select = document.getElementById("select");
  var filter = select.value;
  var list = document.getElementById("listElements");
  var elements = list.getElementsByTagName("li");
  var valueElement;
  for (var i = 0; i < elements.length; i++) {
    valueElement = elements[i].getAttribute("data-value");
    elements[i].style.display = valueElement === filter ? "" : "none";
  }
}

<select id="select" onchange="filterElements()">
 <option value="1">Value 1</option>
 <option value="0">Value 0</option>
</select>

<ul id="listElements">
  <li data-value="1">Element 1</li>
  <li data-value="0">Element 2</li>
  <li data-value="1">Element 3</li>
  <li data-value="0">Element 4</li>
</ul>

使用 querySelector 并初始化为所选值：

function filterElements() {
  var filter = document.getElementById("select").value;
  document.querySelectorAll("#listElements li").forEach(function(li) {
    li.style.display = li.getAttribute("data-value")===filter?"":"none";
  })
}
filterElements();

<select id="select" onchange="filterElements()">
 <option value="1">Value 1</option>
 <option value="0">Value 0</option>
</select>

<ul id="listElements">
  <li data-value="1">Element 1</li>
  <li data-value="0">Element 2</li>
  <li data-value="1">Element 3</li>
  <li data-value="0">Element 4</li>
</ul>

列表过滤器不起作用

Filter for list not working

html

javascript

html-select

filter