javascript - 在javascript中查找元素的索引

Question

我按类名获取所有元素，并为每个元素创建一个监听器，如下所示:

const subnavs = document.getElementsByClassName('subnav') 
for ( let i =0 ; i <subnavs.length ; i++ ) {
   subnavs[i].addEventListener('mouseover', function() {
   purpleDiv.style.marginTop =  rect.height + 'px'
}) 

当鼠标事件被触发时，如何获取被单击的“子导航”的索引？这是在 Wordpress 中，所以我没有一种简单的方法来向每个子导航添加 id 来实现这一目的。

Answer 1

如果您想要索引，只需在回调中使用 i 即可:

   subnavs[i].addEventListener('mouseover', function() {
       purpleDiv.style.marginTop =  rect.height + 'px'
       console.log("INDEX: ", i)
   }) 

如果您稍后尝试使用索引来访问该元素，我建议您执行以下操作:

当事件监听器中的回调被调用时，它会传递一个 MouseEvent

因此，如果将 function() { 更改为 function(event) {，您可以使用 event.target 获取鼠标悬停在上面的特定元素。这是触发“mouseover”事件的元素。

   subnavs[i].addEventListener('mouseover', function(event) {
       purpleDiv.style.marginTop =  rect.height + 'px'
       console.log("ELEMENT: ", event.target)
   })