Question

我想为列表创建一个过滤器，该列表仅显示列表中与<select>（＆＃34; 0＆＃34;或＆＃34; 1＆＃34; ）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我比较过滤器的值和列表元素的值时，即使它们都是＆＃34; 0＆＃34;或两者＆＃34; 1＆＃34;，它总是打印＆＃34;假＆＃34;在控制台中。我在哪里弄错了？

感谢您的帮助。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

li值为数字的原因是

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

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

有关详细信息，请参阅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没有值属性，但它们确实是AND它是一个整数，但它用于（重新）编号有序列表而不是数据属性。

value 此整数属性指示由npm run eject元素定义的列表项的当前序数值。即使列表显示为罗马数字或字母，此属性的唯一允许值也是数字。列出此项后面的项目将继续从值集编号。 value属性对无序列表（<ol>）或菜单（<ul>）没有意义。

使用数据属性可以再次使用HTML世界：

这里它们是两个字符串 - 或者使用<menu>而不是==来免费获取类型转换，但这是可以理解的：

===

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

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

<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>

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();

过滤列表不起作用

3 个答案: