javascript - 如何在javascript中获取点击元素的索引位置

Question

我试图获取从 for 循环数组中单击的特定元素的索引值。我想做的是使用这个索引值并将其传递给一个名为indexValue的变量，然后该变量将确定要显示的特定div。它将显示的 div 与传递给变量的索引值相同。我希望这是有道理的，我只是不确定如何实现这一目标？

标记会是这样的

HTML

<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>

CSS

.test {
   display: none;
}

.show {
   display: block;
}

JS

var button = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function () {

    var indexValue: //Get index value from clicked element
    var test = document.querySelectorAll('.test');

    test[indexValue].classlist.add('show');

  }
}

Answer 1

您可以将 eventListener 放入从循环中获取参数的闭包中。该警报只是为了当您在 fiddle 中单击它时您可以看到索引的结果

var button = document.querySelectorAll('.button');
for (var i = 0; i < button.length; i++) {    
    button[i].addEventListener('click', ((j) => {         
    return function() {
      alert(j)
    }
  })(i))
}

http://jsfiddle.net/cbpw61ur/20/