javascript - 列表过滤器不起作用

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