Javascript 独立隐藏每个列表项的帮助函数

Question

谁能帮我实现一个在点击时一个一个地隐藏列表元素的功能？我只让它工作，但对于一个元素，我不确定它对所有元素的效果如何。

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

我希望它仅在 javascript 原版上运行

这是我到目前为止尝试过的：

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

Answer 1

您只需将 event 参数传递给点击处理函数即可。

当您像这样定义 html 时 onclick="onListItemClick(event)"，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>

Answer 2

不要使用内联 HTML 事件属性。最佳实践是授权。添加一个 class 到你的 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>

Javascript 独立隐藏每个列表项的帮助函数

Javascript help function to hide each listem independently

html

javascript

css

html-helper

list