Pet*_*ong 1 javascript jquery pass-by-value javascript-events
以下页面显示五个按钮,单击每个按钮获取警报'5'.我想当我点击第一个按钮时,我得到警报'1',第二个按钮'2'......等等.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="nums"></div>
<script type="text/javascript">
var nums = [1,2,3,4,5];
for(var i in nums){
var num = nums[i];
var btn=$('<button></button>').text(num).click(function(){alert(num);});
$('#nums').append(btn);
}
</script>
</body>
</html>
JavaScript只有函数作用域,所以在你的例子中只有一个num,它一直被修改,并且当调用click事件时,它等于五.要解决这个问题,你必须使用新的函数范围创建正确的闭包,如下所示:
var nums = [1,2,3,4,5];
var createClick = function (num) { return function() { alert(num); }; };
for(var i in nums){
var num = nums[i];
var btn=$('<button></button>').text(num).click(createClick(num));
$('#nums').append(btn);
}