Javascript 如何循环使用依赖于多个函数的索引？

我使用两种类型的元素，

.element

和

.summary

。这两个类的索引彼此对应，因此当用户在

.element

上有

鼠标悬停

事件时，应将一个类添加到其相应的

.summary

。同样，在

mouseout

上也应该删除相同的类

换句话说，我希望当鼠标悬停在

.element

上时，

.style

类只应用于

.summary

没有声明这么多变量，我想知道循环这些元素的最有效方法

var abc=document.getElementsByClassName（“元素”）；
var xyz=document.getElementsByClassName（“摘要”）；
for（设i=1；i

.element{
光标：指针；
}
.造型{
背景：红色；
}

元素1
要素2
要素3
摘要1
总结2
概要3

您可以这样做，而不必更新html。我们以编程方式设置一个属性，这样当我们将鼠标移到它上面时，就可以得到它的索引。然后，我们使用该索引查找关联的摘要注意您没有通过事件侦听器传递

i

-您测试

event.target

，并根据下面的代码使用

event.target.dataset

拾取闪亮的新属性

这里的另一个好处是，我们结合了事件侦听器逻辑，您可以看到这是有意义的。这个答案利用了您现有的结构，使用更少的代码，并且易于理解

var abc=document.getElementsByClassName（“元素”）；
var xyz=document.getElementsByClassName（“摘要”）；
for（设i=0；i

.element{
光标：指针；
}
.造型{
背景：红色；
}

元素1
要素2
要素3
摘要1
总结2
小结3

您实际上不必循环，事实上最好不要循环。如果您的HTML:elements和summary的每个部分都有容器，那么在元素事件在DOM中冒泡时使用容器捕捉它们，并使用一个处理程序根据它们的数据属性决定如何设置摘要的样式，会更加高效

//缓存容器
const elements=document.querySelector（“#elements”）；
const summaries=document.querySelector（“#summaries”）；
//将侦听器添加到容器中
元素。addEventListener（'mouseover'，handleMouse，false）；
元素。addEventListener（'mouseout'，handleMouse，false）；
功能手柄室（e）{
//从元素中分解类型和id
const{type，target:{dataset:{id}}=e；
//查找相应的摘要-这将使用
//用于创建查询的模板文本
const summary=summaries.querySelector（`[data id=“${id}]”`）；
//然后，根据事件类型，添加或删除样式
如果（类型=='mouseover'）{
summary.classList.add（“样式”）；
}否则{
summary.classList.remove（“样式化”）；
}
}

.element{cursor:pointer；}
.样式{背景：红色；}

要素1
要素2
要素3
摘要1
总结2
总结3

修复代码，使其仅引用addEventListener中的函数（而不是调用它们），从0开始循环（不是1），并使用ID获取相应的元素

短循环没有什么问题

var abc=document.getElementsByClassName（“元素”）；
var xyz=document.getElementsByClassName（“摘要”）；
//修正了，i=1吗
for（设i=0；i

.element{
光标：指针；
}
.造型{
背景：红色；
}

元素1
要素2
要素3
摘要1
总结2
摘要3

尽管您正在立即调用处理程序，而不是创建一个作为侦听器传递的函数，但您的代码看起来相当合理。谢谢您的反馈！有一种普遍接受的方法吗？只需传递函数而不是调用它？尝试

（）=>{movein（i）；}

而不是

movein（i）

。此外，循环以

1

开始，而不是以

0

开始，这可能会导致一些意外的结果behavior@lastr2d2这是完美的。谢谢，非常感谢！谢谢你的评论，我很抱歉我应该澄清一下。我希望当鼠标悬停在

.element

上时，将

.style

类仅应用于

.summary

。