我怎么能在一个循环中扭转这个烂摊子？

Question

我想在一个循环中更改这段代码:请帮助我.

itemAll[0].addEventListener('click', function () {
    klik(0)
}, false);
itemAll[1].addEventListener('click', function () {
    klik(1)
}, false);
itemAll[2].addEventListener('click', function () {
    klik(2)
}, false);
itemAll[3].addEventListener('click', function () {
    klik(3)
}, false);
itemAll[4].addEventListener('click', function () {
    klik(4)
}, false);
itemAll[5].addEventListener('click', function () {
    klik(5)
}, false);
itemAll[6].addEventListener('click', function () {
    klik(6)
}, false);
itemAll[7].addEventListener('click', function () {
    klik(7)
}, false);
itemAll[8].addEventListener('click', function () {
    klik(8)
}, false);
itemAll[9].addEventListener('click', function () {
    klik(9)
}, false);
itemAll[10].addEventListener('click', function () {
    klik(10)
}, false);
itemAll[11].addEventListener('click', function () {
    klik(11)
}, false);

我已经尝试了这个,但它似乎没有用,我真的不明白为什么:

for (var i = 0; i < itemAll.length; i++) {
    var item = itemAll[i];
    item.addEventListener('click', function (item) {
        klik(item);
    })
}

无论如何,谢谢你的时间,我希望有人能为我解决这个问题.

Answer 1

你可以使用.forEach():

itemAll.forEach(function(item, i) {
  item.addEventListener("click", klick.bind(undefined, i));
});

更好的是,您可以确保您正在使用的所有元素都具有公共类,然后在文档级别绑定单个事件处理程序,以处理点击并检查目标元素的类.(基本上,jQuery允许的"事件委托"事情.)