Javascript 列表的筛选器不工作

我想为列表创建一个过滤器，该过滤器只显示与

中给定值匹配的列表元素（“0”或“1”）

函数filterElements（）{
var select=document.getElementById（“select”）；
var filter=select.value；
var list=document.getElementById（“listElements”）；
var elements=list.getElementsByTagName（“li”）；
风险价值要素；
对于（var i=0；i

值1
值0

元素1
元素2
元素3
元素4

因为

过滤器的类型是
字符串
，而
valueElement的类型是
数字
。所以
==
给出了false


函数filterElements（）{
var select=document.getElementById（“select”）；
var filter=select.value；
var list=document.getElementById（“listElements”）；
var elements=list.getElementsByTagName（“li”）；
风险价值要素；
对于（var i=0；i


值1
值0

元素1
元素2
元素3
元素4
函数过滤器元素（）{
var select=document.getElementById（“select”）；
var filter=select.value；
var list=document.getElementById（“listElements”）；
var elements=list.getElementsByTagName（“li”）；
风险价值要素；
对于（var i=0；i

==还将检查类型。因此，您必须使用==，或者您可以键入cast值，然后使用==
我错误地假设LIs没有值属性，但它们有，并且它是一个整数，但它用于（重新）对有序列表进行编号，而不是作为数据属性


此整数属性表示由
元素定义的列表项的当前序号值。此属性唯一允许的值是数字，即使列表中显示的是罗马数字或字母。在此之后的列表项将继续从值集中进行编号。value属性对于无序列表（
）或菜单（
）没有意义

使用数据属性，HTML的世界又恢复正常了：

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


函数filterElements（）{
var select=document.getElementById（“select”）；
var filter=select.value；
var list=document.getElementById（“listElements”）；
var elements=list.getElementsByTagName（“li”）；
风险价值要素；
对于（var i=0；i


值1
值0

元素1
元素2
元素3
元素4
我以为所有东西都是HTML，当DOM检索到字符串时，字符串没有值属性。使用数据值和
valueElement=elements[i].getAttribute（“数据值”）==
而不是
==
numbers@mplungjan [有一个值属性）但实际上它是一个数字而不是字符串。请查看并小心W3学校，因为他们经常传递过时或明显错误的信息。请查看以了解更多详细信息。@不，幸运的是他们有了很大改进。W3愚人也提到了一个事实。我仍然更喜欢MDN You生长激素
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";
 }
}