Question

我正在循环计数器，根据计数器值查找元素，并将事件绑定到与计数器匹配的集合。

psuedo代码：

for index in counter
    find elements of data attribute matching counter
    attach click event to that matched query set

JS：

var groups = [];

$('.match-me').each(function(){
    var group_id = $(this).data('instance');
    if(groups.indexOf(group_id) < 0){
        groups.push(group_id);
    }
});

for(var i of groups ){
    window['test'+i] = $('*[data-instance=' + i + ']');
    window['test'+i].each(function(){
        $(this).on('click',function(){


            //CONSOLE.LOG OF window['test'+i] OUTPUTS THE LAST MATCHED SET


            window['test'+i].css('color','red');
        });
    });
}

问题出在我绑定事件监听的内部，匹配的元素集的变量始终是最后匹配的元素集。我认为通过在window中创建动态全局变量，我会逃避这个问题，但我不确定我做错了什么。

Answer 1

当点击事件发生时，i已经增加到最后一个元素。

使用闭包：

for(var i of groups ){
    window['test'+i] = $('*[data-instance=' + i + ']');
    window['test'+i].each(function(){
         (function(i) {
              $(this).on('click',function(){
                window['test'+i].css('color','red');
              });
          })(i);
     });
}

javascript事件被应用于错误的元素

1 个答案: