Fatal编程技术网
  • javascript/
  • Javascript帮助函数独立隐藏每个列表

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

javascript html css list

Javascript帮助函数独立隐藏每个列表,javascript,html,css,list,html-helper,Javascript,Html,Css,List,Html Helper,有人能帮我一个函数，在单击列表元素时一个一个地隐藏它吗？我只让它工作，但对于一个单一的元素，我不知道它将如何去为所有的人 假设我有一个包含5个元素的列表。当我点击元素1时，它消失了。如果我点击元素2，它也会消失，以此类推 我希望它只在javascript上运行 这是我迄今为止一直在尝试的： <!DOCTYPE html> <html> <body> <ul> <li id ="id1" onclick="

有人能帮我一个函数，在单击列表元素时一个一个地隐藏它吗？我只让它工作，但对于一个单一的元素，我不知道它将如何去为所有的人

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

我希望它只在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>



    
咖啡
咖啡2
咖啡3
您可以为每个元素分配相同的类名，但不具有相同的id，因此我建议您使用
querySelectorAll
函数来解决此问题

给定这样的HTML

    
咖啡
咖啡2
咖啡3
您的JavaScript代码如下所示

const items=document.queryselectoral（“.item”）；
items.forEach（（item）=>item.addEventListener（“单击“，（）=>{item.style.visibility=“hidden”}））；
这将遍历文档中类名为
item
的元素数组，并分别在每个元素上设置
click
事件侦听器

当然，您的问题还有许多其他解决方案，这只是一种方法，您只需将
事件
参数传递到单击处理程序函数中即可

当您像这样定义html时，Javascript会自动将
事件
对象发送到函数中

事件
对象内部有许多属性。但是您所关心的是
事件.target
，它是您单击的元素

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

函数onListItemClick（事件）{
event.target.style.visibility='hidden'；
}


    
咖啡1
咖啡2
咖啡3
不要使用内联HTML事件属性。最佳做法是授权。向
ul
添加一个类，这样您只需要一个
eventListener

document.querySelector（“无序列表”）.addEventListener（“单击”，函数（e）{
if（例如target.classList.contains（“id1”））{
e、 target.style.opacity=0；
}
});

    
咖啡
咖啡2
咖啡3

所有的onClick get元素都使用id1。每个元素都以其元素的ID为目标。