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

获取数组中单击项的当前索引

3 个答案: