Question

我需要在eventListener单击上获取this.element索引。我寻找了一个好的索引解决方案，但我大部分都不理解。

<div class="navbar">
  <ul>
    <li class="menu">Link 1</li>
    <li class="menu">Link 2</li>
    <li class="menu">Link 3</li>
    <li class="menu">Link 4</li>
    <li class="menu">Link 5</li>
  </ul>
</div>

现在我需要像这样的循环变量来匹配我的索引

    var $menuItem = document.getElementsByClassName('menu');

for ( var x = 0; x < $menuItem.length; x++ ){
    $menuItem[x].addEventListener('click', function(){
        if (this.toString() + index == $menuItem[x]){
            $menuItem[x].classList.add('active')
        }
    })
}

我知道这可能不是向this元素添加链接的最佳方法，但是我需要另一个函数的索引。

Answer 1

您已经有了索引。 x变量。您可以在相应的处理程序中使用自调用函数记住它：

for (var x = 0; x < $menuItem.length; x++) {
  (function(index) {
     $menuItem[index].addEventListener('click', function() {
       // ...
     })
  })(x)
}

另一个选择是使用Array#indexOf函数：

// Convert the `HTMLCollection` into a regular array!
var $menuItem = [].slice.call(document.getElementsByClassName('menu'));

for (var x = 0; x < $menuItem.length; x++) {
  $menuItem[x].addEventListener('click', function() {
    var index = $menuItem.indexOf(this);
  })
}

另一个选择是使用Array#forEach方法：

[].forEach.call(document.getElementsByClassName('menu'), function(el, index) {
   el.addEventListener('click', function() {
     // `index` refers to clicked element index in the collection
   })
});

Answer 2

这是closure问题。请参阅一种可能的解决方案。

function createHandler(index) {
    return function() {
        alert('you clicked ' + index);
    }
}              

for ( var x = 0; x < $menuItem.length; x++ ){
    $menuItem[x].addEventListener('click', createHandler(i));     
}

此元素索引

2 个答案: