Question

在我的示例小提琴中，我得到了我点击的元素的.innerText。我怎样才能以这种方式（或更好？）我点击的项目的索引？

没有jQuery会很棒，因为我想学习没有jQuery的生活：D

var el = document.getElementsByClassName("lol");

for(var i = 0; i < el.length; i++ ) {
el[i].addEventListener("click", function(e) {
     console.log(e.target.innerText)
});
}

https://jsfiddle.net/y6s8c1y8/2/

Answer 1

getElementsByClassName 返回具有所有给定类名的所有子元素的类数组对象。由于我们假设使用Array#indexOf方法，因此输入必须为array
使用Array#from，它会从类似数组或可迭代的对象创建一个新的Array实例。
使用Array#indexOf获取element的索引

var el = document.getElementsByClassName("lol");
var arrElems = Array.from(el);
//Or var arrElems = [].slice.call(el);
for (var i = 0; i < el.length; i++) {
  el[i].addEventListener("click", function(e) {
    console.log("text is:   " + e.target.innerText);
    console.log("Index is:   " + arrElems.indexOf(e.target));
  });
}

.lol {
  width: 100px;
  height: 100px;
  background: #000;
  float: left;
  margin-right: 5px;
}

<div class="lol">
  1
</div>
<div class="lol">
  2
</div>
<div class="lol">
  3
</div>
<div class="lol">
  4
</div>

点击元素的位置（没有jQuery）

1 个答案:

Fiddle Demo