獲得點擊的項目的當前索引在數組

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