[英]How can I turn this mess in a single loop?
I want to change this long piece of code in a single loop: Please help me. 我想在一个循环中更改这段较长的代码:请帮助我。
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);
I already tried this but it does not seem to work, I really dont get it why: 我已经尝试过了,但是它似乎不起作用,我真的不明白为什么:
for (var i = 0; i < itemAll.length; i++) {
var item = itemAll[i];
item.addEventListener('click', function (item) {
klik(item);
})
}
Anyway thank you for your time, I hope someone can figure this out for me. 无论如何,谢谢您的时间,希望有人能帮我解决这个问题。
You can use .forEach()
: 您可以使用.forEach()
:
itemAll.forEach(function(item, i) {
item.addEventListener("click", klick.bind(undefined, i));
});
Better yet, you could make sure that all the elements you're working with have a common class, and then just bind a single event handler at the document level that handles clicks and checks for the target element's class. 更好的是,您可以确保要使用的所有元素都具有一个公共类,然后只需在文档级别绑定一个事件处理程序即可处理单击并检查目标元素的类。 (Basically, the "event delegation" thing that jQuery allows.) (基本上,是jQuery允许的“事件委托”。)
It seems like you have an error in your loop. 似乎您的循环中有错误。 From your code I would assume that you should call your klik()
function on i
instead of item
. 从您的代码中,我假设您应该在i
而不是item
上调用klik()
函数。
for (var i = 0; i < itemAll.length; i++) {
(function(i) {
itemAll[i].addEventListener('click', function () {
klik(i);
})(i);
}
Try this: 尝试这个:
for (var i = 0; i < itemAll.length; i++) {
var item = itemAll[i];
(function(item)
{
item.addEventListener('click', function () {
klik(item);
});
})(item);
}
You need to create a new scope or when you will call klik(item)
item
will always be equal to the last item. 您需要创建一个新的作用域,或者当您调用klik(item)
item
将始终等于最后一个项目。
EDIT: It seems you want to pass i
as parameter not item
, replace the item
parameter by i
编辑:似乎您想将i
作为参数而不是item
传递,由i
替换item
参数
May I suggest a functional programming example, just to share an alternative solution? 我是否可以提出一个功能性的编程示例,以分享替代解决方案?
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.