在 javascript 中查找元素的索引

Question

我通过 class 名称获取所有元素，并为每个元素创建一个侦听器，如下所示：

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)
   }) 

Answer 2

您可以使用 object：

const subnavs = document.getElementsByClassName('subnav') 
for ( let i =0 ; i <subnavs.length ; i++ ) {
   subnavs[i].addEventListener('mouseover', function(e) {
   /*** Now you can use 'e' to reference the nav triggering the listener **/
   e.style.marginTop =  rect.height + 'px'
   ***/
   purpleDiv.style.marginTop =  rect.height + 'px'
})