addEventListener不能按预期的方式工作在循环中

我想在JS中创建一个日历/日程表，并且在预定事件上使用的方法addEventListener返回相同的事件ID，当它应该返回点击事件的ID时。addEventListener不能按预期的方式工作在循环中

这是我此刻的功能：

monthStart = date.clone().subtract(1, 'months').endOf 'month' 
monthEnd = parseInt date.clone().endOf('month').format 'DD' 
daysContainer = @createElement 'div', 'calendar__days' 

for i in [1..monthEnd] 
    day = monthStart.add 1, 'day' 
    current = day.format 'DD-MM-YYYY' 

    line = @createElement 'div', 'calendar__line' 
    line.classList.add 'line--today' if current == @current.format 'DD-MM-YYYY' 

    header = @createElement 'div', 'line__header' 
    header.appendChild @createElement 'h1', 'line__date', day.format 'DD' 
    header.appendChild @createElement 'span', 'line__day', day.format 'dd' 
    events = @createElement 'div', 'line__events' 

    events_data = @parseEventsPerDay current 
    for event in events_data 
    event_block = @createElement 'div', 'event' 
    x = event.id 
    event_block.addEventListener 'click', => console.log event.id <<---------- this line returns always the same id 
    event_container = @createElement 'div', 'event__container' 
    event_block.appendChild @createElement 'div', 'event__bbg' + ' ' + @resolveColor 'bg', event.type 
    event_container.appendChild @createElement 'div', 'event__timeinterval', event.timeStart + ' - ' + event.timeEnd 
    event_container.appendChild @createElement 'div', 'event__content' + ' ' + @resolveColor('link', event.type), event.title 

    event_block.appendChild event_container 
    events.appendChild event_block 

    line.appendChild events 
    line.appendChild header 
    line.appendChild events 
    daysContainer.appendChild line 

@el.appendChild daysContainer

而且任何意见，建议，为整个项目的教程，对我的代码，欢迎选购。

来源

2016-11-15 Radu Dascălu

在'addEventListener'的循环中使用闭包。 [更多信息]（http://stackoverflow.com/questions/3572480/please-explain-the-use-of-javascript-closures-in-loops） – Robiseb

@Robiseb我试过这个：（（） - > console.log event.id）它没有工作。 –

作为@robiseb在评论中提到，您需要使用闭包来确保当前事件是闭合循环内的局部变量，而不是全局变量。

关于关闭的细节，see this question。

Coffeescript为我们提供了do关键字，以便于操作。请参阅loops and comprehensions coffee docs中的最后一个示例。

for event in events_data 
    do(event) -> 
    event_block = @createElement 'div', 'event' 
    x = event.id 
    event_block.addEventListener 'click', => console.log event.id 
    . 
    . 
    .

来源

2016-11-15 13:48:52

这工作完美，谢谢。 –

addEventListener不能按预期的方式工作在循环中

回答

相关问题