javascript - 检查元素是否与 JavaScript 中的条件对应

Question

我想创建一个具有下一个逻辑的脚本：

let arr = [1, 2, 3, 4, 5, 6, 8];

	document.getElementById('outer').innerHTML = arr.map(item =>
			`<li > ${item}</li>`
	).join(' ');

<ul id="outer">

</ul>

当我单击每个<li>以检查它是否与下一个条件对应item>3，以及该项目是否低于 3 以隐藏该元素时。这个场景应该适用于每个元素，所以当我点击另一个元素来应用上面的想法时。我想在没有 CSS 类的情况下做到这一点。怎么可能？可以在这里应用该方法filter()吗？

标签： javascript

Answer 1

你可以使用这样的东西。

let arr = [1, 2, 3, 4, 5, 6, 8];
document.getElementById('outer').innerHTML = arr.map(item =>
		`<li > ${item}</li>`
).join(' ');
document.querySelectorAll('#outer li').forEach((item) => {
  item.addEventListener('click', (e) => {
    if(parseInt(e.target.textContent) < 3) {
      e.target.style.opacity = 0;
    }
  });
});

<ul id="outer">

</ul>

最佳实践是将项目值传递给data属性，而不是将其作为文本。请参阅下面的示例片段。

let arr = [1, 2, 3, 4, 5, 6, 8];
document.getElementById('outer').innerHTML = arr.map(item =>
		`<li data-value="${item}">Element ${item}</li>`
).join(' ');
document.querySelectorAll('#outer li').forEach((item) => {
  item.addEventListener('click', (e) => {
    if(parseInt(e.target.dataset.value) < 3) {
      e.target.style.opacity = 0;
    }
  });
});

li {
list-style: none;
background: #cecece;
text-align: center;
padding: 1rem;
width: 10rem;
margin: 0 0 .25rem 0;
}

<ul id="outer">

</ul>