Javascript 如何简化

基本上，如果我将鼠标悬停在列表项上，我希望向相应的范围添加一个类。 现在，我发现了如何使用以下代码实现这一点

我的问题是：有没有一种方法可以简化这个过程（不重复）？如果是，具体情况如何

编辑

我第一次在这里发帖。我想只给这个js就足够了。 这里有更多的信息

这是一个导航栏，其中包含4个列表项。在每个列表项中都有一个跨度。如果我将鼠标悬停在一个特定的列表项上，相应的跨度上会出现一个边框

整个页面的eventListener似乎有点粗糙，只想将其用于这4个项目

  var listItems = document.querySelectorAll(".hover");
  var spanClass = document.querySelectorAll(".navbar-top-border");


  listItems[0].addEventListener("mouseover", event => {
    spanClass[0].classList.add("navbar-top-border-visible");
  });
  listItems[0].addEventListener("mouseout", event => {
    spanClass[0].classList.remove("navbar-top-border-visible");
  });

  listItems[1].addEventListener("mouseover", event => {
    spanClass[1].classList.add("navbar-top-border-visible");
  });
  listItems[1].addEventListener("mouseout", event => {
    spanClass[1].classList.remove("navbar-top-border-visible");
  });

---

您可以循环浏览项目，而不是使用项目索引。

是。使用where将处理程序绑定到需要使用回调的元素的公共祖先，而不是将每个元素绑定到本质上相同的事件侦听器。事件将起源于某个元素，然后冒泡到处理它的祖先。当它被处理时，您可以确定它起源于何处，然后采取相应的行动

然后，在处理程序中，如果需要访问另一个元素，请使用DOM属性来查找与

事件.target

相关的元素（有多种可能执行此操作：

最接近的
，
下一个元素同级
，
以前的元素同级
，
父级
，等等）。或者，在您的例子中，您可以动态地获取鼠标悬停列表项的索引，并使用该索引对跨度进行操作

通过这种方式，您只需设置一次处理程序，这减少了编码，减少了各种元素使用的内存，并且不需要循环或硬编码索引。它还具有高度可扩展性，因为添加/删除DOM元素（手动或动态）不需要对处理程序配置进行任何更改。

而且，特别是在与循环相关的情况下

下面是一个例子：


//这些集合稍后将用于匹配索引
//但不需要循环或硬编码索引。
var listItems=Array.from（document.queryselectoral（“.hover”）；
var spanClass=document.querySelectorAll（“.navbar上边框”）；
//在公共祖先上设置事件处理程序
文件.增补的列表（“鼠标悬停”，foo1）；
文件.增补的清单（“鼠标出”，第2页）；
功能1（事件）{
//测试事件是否起源于
//你关心的一个因素
if（event.target.classList.contains（“悬停”））{
//查找与列表项具有相同索引的范围
//并添加所需的类
spanClass[listItems.indexOf（event.target）].classList.add（“导航栏上边框可见”）；
}
}
功能2（事件）{
//测试事件是否起源于
//你关心的一个因素
if（event.target.classList.contains（“hover”）{
//查找与列表项具有相同索引的范围
//并删除所需的类
spanClass[listItems.indexOf（event.target）].classList.remove（“导航栏上边框可见”）；
}
}
.hover{颜色：蓝色；文本装饰：下划线；光标：指针；}
.navbar上边框{显示：无；}
.navbar上边框可见{display:inline；}

项目
项目
项目
项目

项目1
项目2
项目3
第4项以及如何进行，但在这种情况下，您实际上只需要0和1作为索引

var listItems = document.querySelectorAll(".hover");
var spanClass = document.querySelectorAll(".navbar-top-border");

let indxeses = [0, 1]

indxeses.forEach(el => {
  listItems[el].addEventListener("mouseover", event => {
    spanClass[el].classList.add("navbar-top-border-visible");
  });
  listItems[el].addEventListener("mouseout", event => {
    spanClass[el].classList.remove("navbar-top-border-visible");
  });
})

若他只想要那个些索引，而不想要其余的项目（若有的话）呢？您正在映射所有内容。你看不到HTML…根据代码，他似乎在向所有元素添加侦听器。不，他没有，他将它添加到2个索引编号，0和1，用于spanClass和listItems，如果还有更多呢？如果你没有在
map
方法中映射任何东西，只需使用
forEach
或
for
循环，你就需要显示HTML，这样我们就可以查看结构，看看是否有理由只使用0和1索引，以及这些元素列表中是否有更多的元素。没有它你只能得到猜测。创建@ikiK一般来说，我同意你的看法，但在这种情况下，HTML的其余部分是不相关的，因为它不会改变基本问题或解决方案（这不需要猜测）。其他答案不包括@ScottMarcus是的，我喜欢这种方法，但实际上你在文档中的所有元素中都添加了事件。如果有3个foo，他只想对前2个做出反应，这仍然不包括这个案例。。。正如我在问题的评论中所说，没有足够的信息来100%正确地回答问题，或者我的答案是正确的：）实际上，您还向文档中的所有元素添加了事件，无循环和无索引的好处使该方法更具性能和可伸缩性。“处理程序只附加到一个祖先元素，因此只有一个对象会因附加配置而膨胀。”感谢这一点，我从未真正参与其中，我通常只是循环并添加事件。在jquery中，我会委托document.on（event，foo）…感谢您的输入。这很有魅力！
var listItems = document.querySelectorAll(".hover");
var spanClass = document.querySelectorAll(".navbar-top-border");

let indxeses = [0, 1]

indxeses.forEach(el => {
  listItems[el].addEventListener("mouseover", event => {
    spanClass[el].classList.add("navbar-top-border-visible");
  });
  listItems[el].addEventListener("mouseout", event => {
    spanClass[el].classList.remove("navbar-top-border-visible");
  });
})