单击事件显示并删除所有覆盖，而不是单独-JavaScript

我有一个包装容器，我想是这样，当我点击每一条信息的名称显示只是为该包装，当我点击/关闭“x”按钮，它只删除该按钮它

使用

forEach（）

方法，它将显示并移除所有内部容器，除了已单击的容器

我认为可以使用

这个

关键字，但我无法让它工作

我是Javascript新手，因此非常感谢您的帮助

代码笔：

window.addEventListener（'DOMContentLoaded'，function（）{
让name=document.querySelectorAll（'.name'））
let close=document.querySelectorAll（“.close”）
让innerText=document.querySelectorAll（“.innerText”）
//----显示文本
名称.forEach（功能（项）{
item.addEventListener（'单击'，函数（））{
forEach（函数（内部）{
inner.classList.add（'active'）
})
}，错）
})
//----隐藏文本
close.forEach（函数（项）{
item.addEventListener（'单击'，函数（））{
forEach（函数（内部）{
内部.classList.remove（'active'）
})
}，错）
})
})//DomContentLoaded

*{位置：相对；框大小：边框框；}
身体{
保证金：0；
高度：100vh；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.包装纸{
宽度：10雷姆；
背景：#fafafa；
填充：1rem；
保证金：1rem；
}
.内文{
背景：红色；
显示：无；
}
.inner-text.active{
显示：块
}
.结束{
位置：绝对位置；
顶部：-5雷姆；
右：0rem；
填充：.5rem；
背景：白色；
z指数：2；
}
.姓名{
背景：黄色；
填充：1rem；
光标：指针；
}

名称

其他内容
x

信息
信息
信息
信息
信息

名称

其他内容
x

信息
信息
信息
信息
信息

您已经基本确定了问题中的问题，即您正在事件处理程序中的所有面板上循环，并向所有面板添加/删除类。相反，您可以使用“事件委派”，在所有面板的一个公共祖先上只设置一个事件处理程序，让事件“冒泡”到该祖先并在那里处理。此外，由于显示和隐藏的代码非常相似，因此您可以只使用一个函数来实现这两个功能

最后，

innerText

不是变量的好名字，因为

innerText

实际上是一个DOM元素属性名

//如果将保存此代码的脚本放在
//关闭BODY标记时，不需要设置DOMContentLoaded
//事件。
document.querySelector（“.masterWrapper”）.addEventListener（“单击”），函数（事件）{
//检查事件是否起源于某个元素
//我们关心处理问题
//获取对所单击元素的祖先的引用
//然后找到其中的下降者。
const internal_text=event.target.closest（“.wrapper”）.querySelector（“.internal text”）；
//单击名称时
if（event.target.classList.contains（“name”））{
//如果面板尚未显示其内容：
如果（！internal_text.classList.contains（“active”））{
内部文本.classList.add（“活动”）；
}
}
//单击X时
if（event.target.classList.contains（“close”））{
event.target.parentElement.classList.remove（“活动”）；
}  
});
*{位置：相对；框大小：边框框；}
身体{
保证金：0；
高度：100vh；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.包装纸{
宽度：10雷姆；
背景：#fafafa；
填充：1rem；
保证金：1rem；
}
.内文{
背景：红色；
显示：无；
}
.inner-text.active{
显示：块
}
.结束{
位置：绝对位置；
顶部：-5雷姆；
右：0rem；
填充：.5rem；
背景：白色；
z指数：2；
}
.姓名{
背景：黄色；
填充：1rem；
光标：指针；
}

名称

其他内容
x

信息
信息
信息
信息
信息

名称

其他内容
x

信息
信息
信息
信息
信息

谢谢@ScottMarcus我想我可能需要编辑这个问题。我简化了标记以使其更易于阅读，但它不会是完整版本中的同级元素。我需要引用变量名。我认为“这个”可能有用，但无法让它发挥作用。@Anna\p它不一定是兄弟姐妹。无论关系是什么，都有一种不用id或显式引用的方法来引用它。只要编辑你的问题以显示真正的层次结构。如果我添加完整的代码，没有人会回答这个问题：这是一个我接管的网站，它有大约10层真正毫无意义的html。我只需要在每个单独的“wrapper”元素中找到方法，当单击该包装的名称时，会显示innertext，当在该单独的包装中单击“close”元素时，它会被删除。我以为我可以通过引用变量名来实现这一点？不过我对问题进行了编辑，以使其更清楚。@Anna\p尽管HTML层可能很复杂，但您确实应该展示至少一个HTML层的结构示例。我真的不知道引用变量名是什么意思，因为变量仍然必须设置为元素。