在javascript中查找元素的索引答案

【问题标题】：find index of element in javascript在javascript中查找元素的索引
【发布时间】：2019-10-11 06:33:46
【问题描述】：

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

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

当鼠标事件被触发时，我如何获得点击了“subnav”的索引？这是在 Wordpress 中，所以我没有一种简单的方法可以为每个子导航添加一个 id 来解决问题。

【问题讨论】：

通过event.target使用事件委托

标签： javascript wordpress indexing submenu getelementsbyclassname

【解决方案1】：

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

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

如果您稍后尝试使用索引来访问元素，我会推荐以下方法：

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

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

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

【讨论】：

不起作用。我没有被写到控制台。是否存在关闭问题？
如果你没有看到任何控制台输出，要么是你的事件监听器没有工作，要么有其他错误（purpleDiv 存在吗？rect 存在吗？） Tuckers codepen 演示了这应该可以工作必须起来

【解决方案2】：

你可以使用一个对象：

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

【讨论】：

反模式。使用event.target