получать текущий индекс щелкнул элемент в массиве

Question

У меня есть массив изображений

var moniqueThumbs = document.getElementsByClassName('moniqueThumbs'); 

Теперь я использую функцию выберитеСетевого щелкнул элемент.

for (var i = 0; i < moniqueThumbs.length; i++) { 

    moniqueThumbs[i].addEventListener("click", grabBigImgPath); 
} 

Теперь, как можно сохранить текущий индекс нажатого пункта ??

function grabBigImgPath() { 
var currentItemclicked=this; 
} 

Я имею в виду сохранить индекс currentItemclicked ???

Answer 1

Вы можете использовать что-то вроде

var moniqueThumbs = [].slice.call(document.getElementsByClassName('moniqueThumbs')); //using the slice to convert the HTMLCollection to a real array 
 

 
for (var i = 0; i < moniqueThumbs.length; i++) { 
 

 
    moniqueThumbs[i].addEventListener("click", grabBigImgPath); 
 
} 
 

 
function grabBigImgPath() { 
 
    var index = moniqueThumbs.indexOf(this) 
 
    //then use the Array.indexOf() to get the index 
 
    snippet.log('clicked: ' + index) 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 

 
<div class="moniqueThumbs">1</div> 
 
<div class="moniqueThumbs">2</div> 
 
<div class="moniqueThumbs">3</div> 
 
<div class="moniqueThumbs">4</div> 
 
<div class="moniqueThumbs">5</div>

Answer 2

Вы можете передать в качестве аргумента:

for (var i = 0; i < moniqueThumbs.length; i++) { 
    moniqueThumbs[i].addEventListener("click", function() { 
     grabBigImgPath(i); 
    }); 
} 

function grabBigImgPath(index) { 
    var currentItemclicked=index; 
} 

Answer 3

лаконичный, ясный код, который работает на современных браузерах (с polyfills доступно для немых браузеров)

moniqueThumbs.forEach(function(thumb, indx) { 
    thumb.addEventListener('click', grabBigImgPath.bind(thumb, indx)); 
}); 

forEach polyfill

bind polyfill