<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ovi Maps API Example</title>
</head>
<body>
<button id="butt1" name="butt" type="button">Click Me!</button>
<button id="butt2" name="butt" type="button">Click Me!</button>
<button id="butt3" name="butt" type="button">Click Me!</button>
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="foo.js" type="text/javascript" charset="utf-8"></script>
</html>
还有...
$(document).ready(function() {
//alert("ready");
var myClickFunctions = new Array();
//add event handlers to all three buttons
for(var i=1;i<=3;i++){
myClickFunctions[i]=function(){
var index = i;
alert(index);
}
var buttonID = "#butt";
var button = $(buttonID + i);
button.click(myClickFunctions[i]);
}
});
每个按钮都会打印 4。这是为什么？有什么好方法可以让每个按钮打印 i 的值？处理程序是在其中创建的？
最佳答案
阅读 JavaScript 闭包及其工作原理。事实上，底部的 button.click(myClickFunctions[i]); 中的 i 最后会是 4。请记住，var index=i 在声明函数时不会设置，只有在调用函数时才会设置。您需要做的是将函数包装在闭包中，如下所示:
myClickFunctions[i]=(function(i){
return function(){
var index = i;
alert(index);
}
})(i)
或者更好的是，这样做:
//put this anywhere
function myClickFunctions(i){
return function(){
alert(i);
}
}
//and at the end:
button.click(myClickFunctions(i));
myClickFunctions 函数将获取 i 的当前值，并返回一个已设置该值的函数。这是执行此操作的正确方法。
关于javascript - 为什么这个 html/JavaScript 组合会这样打印？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6876355/