Javascript帮助功能独立隐藏每个列表答案

【问题标题】：Javascript help function to hide each listem independentlyJavascript帮助功能独立隐藏每个列表
【发布时间】：2021-08-05 04:06:15
【问题描述】：

有人可以帮我一个功能来隐藏一个列表元素，当单击它时，一个一个地隐藏它？我只是让它工作，但对于一个元素，我不确定它会如何适用于所有元素。

假设我有一个包含 5 个元素的列表。当我单击元素 1 时，它消失了。如果我点击元素二，它也会消失等等。

我希望它只在 javascript vanilla 上做

这是我迄今为止尝试过的：

<!DOCTYPE html>
<html>
<body>


<ul>
  <li id ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee</li>
  <li class ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee 2</li>
  <li class ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee 3</li>

</ul>  

</body>
</html>

【问题讨论】：

所有带有 id1 的 onClick 获取元素。每一个都以它的元素的 ID 为目标。

标签： javascript html css list html-helper

【解决方案1】：

您可以通过将event 参数传递给点击处理函数来简单地做到这一点。

当您像 onclick="onListItemClick(event)" 这样定义您的 html 时，Javascript 会自动将 event 对象发送到您的函数中。

Event 对象内部有许多属性。但您只关心event.target，这是您单击的元素。

然后您可以轻松地操作该 html 元素的任何部分。

function onListItemClick(event) {
  event.target.style.visibility = 'hidden';
}

<!DOCTYPE html>
<html>

<body>
  <ul>
    <li onclick="onListItemClick(event)">Coffee 1</li>
    <li onclick="onListItemClick(event)">Coffee 2</li>
    <li onclick="onListItemClick(event)">Coffee 3</li>
  </ul>

</body>

</html>

【讨论】：

【解决方案2】：

不要使用内联 HTML 事件属性。最佳实践是委托。向您的ul 添加一个类，这样您就只需要一个eventListener。

document.querySelector(".unordered-list").addEventListener("click", function(e) {
  if (e.target.classList.contains("id1")) {
    e.target.style.opacity = 0;
  }
});

<ul class="unordered-list">
  <li class="id1">Coffee</li>
  <li class="id1">Coffee 2</li>
  <li class="id1">Coffee 3</li>
</ul>

【讨论】：