如何获取javascript中单击元素的索引位置

Question

我试图获取从for循环数组中单击的特定元素的索引值。 然后，我想使用此索引值并将其传递给名为indexValue的变量，该变量将确定要显示的特定div。 它将显示的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放在需要从循环中获取参数的闭包中。 警报只是这样，当您在提琴中单击它时，您可以看到索引的结果

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/