为什么我不能设置批量事件处理程序？

所以这两个做工精细：为什么我不能设置批量事件处理程序？

$(document).on("click", "#_something", function(){ 
    $('#vid').attr('src',video_config["something"].video); 

}); 
$(document).on("click", "#_anotherthing", function(){ 
    $('#vid').attr('src',video_config["anotherthing"].video); 

});

然而，something和nothing是对象我做的属性，所以我试图做到这一点：

for (var key in video_list){ 
    $(document).on("click", "#_"+key, function(){ 
     $('#vid').attr('src',video_list[key].video); 
    }); 
}

哪搞砸了排序，并将所有src值设置为我拥有的最后一个video_list[key].video值。换个角度来说，这个分配的所有src属性都是相同的值。

如何在不手动编写每个事件处理程序的情况下正确执行此操作？

来源

2014-03-28 Louis93

使用类而不是ID的。 – blgt

有多个#vid会搞砸 –

你有多个具有相同ID的元素吗？总的来说，这是非常令人沮丧的。 – guruprasath

这是因为您的处理程序函数捕获key作用于父函数的变量。当你的Handler执行时，key有最后一个值。

修正是通过使用另一个函数作用域来捕获每次迭代时的当前值。就像这样： javascript closure in a for loop

在ES6浏览器，let是块作用域，你可以使用它作为一个快捷方式：

for (var k in video_list) { 
    function(key) { 
    // create your event handler here using key 
    }(k); 
}

这是在这个问题上是基本相同的，因为这一个解释

for (let k in video_list) { 
    let key = k; 
    // same code as your question goes here, using key. 
}

来源

2014-03-28 19:48:02 jods

'let'在大多数浏览器中不被支持 – blgt

这就是为什么我在ES6浏览器_中说的原因。此外，_most_浏览器取决于您的目标受众：它受IE11 +支持，至少FF24 +和至少Chrome 30+支持。对于那些ES6兼容性的东西，你可以看看Kangax兼容性表格：http://kangax.github.io/es5-compat-table/es6/#let – jods

http://jsfiddle.net/jeuL7/ < - 给它一个走。我不断收到语法错误。 – blgt

快速和肮脏的黑客：

for (var key in video_list){ 
    (function(key){// create a new context, so not all handlers point the the same key 
     $(document).on("click", "#_"+key, function(){ 
      $('#vidSrc').attr('src',video_list[key].video); 
     }); 
    })(key); 
}

正确的方法：

$(document).on("click", ".some-new-class-you-just-defined", function() { 
    $(this).attr('src', video_list[$(this).attr('id').slice(1)].video); 
});

编辑：添加子字符串的id。像@jods建议的那样，最好是有一些查找机制，而不是像ID一样存储。

来源

2014-03-28 19:51:20 blgt

你的第二段代码是不正确的，因为'id'开始时是一个额外的下划线'_'而不是原始的属性名称。如果你走这条路线，你应该把属性名称放在一个额外的属性中，比如'data-videokey = something'。 – jods

+1使用类不是循环 – Jasen

@jods你是对的。在循环中，错过了这一点。 – blgt

下面是使用一个事件处理程序，一类和数据属性的简单方法：

$(document).on("click", ".video", function(){ 
    var key = $(this).data("key"); // in the element add data-key="xyz" 
    $('#vid').attr('src',video_list[key].video); 
});

来源

2014-03-28 19:55:36 Wilmer

为什么我不能设置批量事件处理程序？

回答

相关问题