过滤列表不起作用

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.所以===给出错误.

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

value属性设置列表项的值.以下列表项将从该数字增加.

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

有关详细信息,请参阅此