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));
});

更好的是，您可以确保您正在使用的所有元素都有一个公共类，然后在文档级绑定一个处理点击并检查目标元素的单个事件处理程序＆＃39;上课。（基本上，＆＃34;事件委托＆＃34; jQuery允许的事情。）

Answer 2

好像你的循环中有错误。在您的代码中，我认为您应该在klik()而不是i上调用item函数。

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

Answer 3

试试这个：

for (var i = 0; i < itemAll.length; i++) {
    var item = itemAll[i];

    (function(item)
    {
        item.addEventListener('click', function () {
            klik(item);
        });
    })(item);
}

您需要创建一个新的范围，或者当您致电klik(item)时item将始终等于最后一项。

编辑：您似乎希望将i作为参数而不是item，将item参数替换为i

Answer 4

我可以建议一个函数式编程示例，只是为了共享一个替代解决方案吗？

function assign_click_event_to_collection(elements){
  assign_click_event_to_element_and_move_to_next(elements, 0);
}

function assign_click_event_to_element_and_move_to_next(elements, index){
  if(index > elements.length) return false;
  itemAll[index].addEventListener('click', function() {
    klik(index);
  }, false);
  assign_click_event_to_element_and_move_to_next(elements, index+1);
}

assign_click_events_to_collection(itemAll);

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

4 个答案: