过滤列表不起作用

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

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

value 此整数属性指示由<ol> 元素定义的列表项的当前序数值。此属性的唯一允许值是数字，即使列表以罗马数字或字母显示也是如此。列表后面的项目从值集中继续编号。 value 属性对于无序列表 (<ul>) 或菜单 (<menu>) 没有任何意义。

使用数据属性 HTML 世界又好了：

这里它们是两个字符串 - 或者使用 == 而不是 === 以免费但以易于理解的方式进行类型转换：

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>

Answer 2

因为typeof filter 是string 而typeof valueElement 是Number。所以=== 给出了错误。

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 值为 number 的原因是

value 属性设置列表项的值。以下列表项将从该数字开始递增。

值必须是数字，并且只能在有序列表中使用

欲了解更多信息，请参阅this

Answer 3

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

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