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

时间:2018-08-08 12:54:45

标签: javascript

我试图获取从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');

  }
}

1 个答案:

答案 0 :(得分: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/