问题描述:为多个元素动态添加onclick事件时,onclick事件方法体内的循环变量不会被保存,原因是for循环时 和 click事件被触发时 是不同的两个时间。 循环中产生的变量i 在click事件触发时已经不存在了。所以要通过闭包或者添加额外属性的形式把具体的值保存下来。
首先,循环变量未被保存的情况
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title> 循环变量为被保存的情况 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var test = function() {
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
var btn = btns[i];
btn.onclick = function(){
alert( "i: " + i); //点击事件触发时, i都是为最大值6
};
}
}
</script>
</head>
<body οnlοad="test();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>
方法一. 通过闭包的方式保存循环变量i的值:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 通过闭包的方式保存循环变量i的值 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var closure = function() { //closure闭包
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
(function(j){
var btn = btns[j];
btn.onclick = function(){
alert( " j: " + j);
};
})(i);
}
}
</script>
</head>
<body οnlοad="closure();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>
方法二. 通过添加额外属性保存循环变量的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 通过添加额外属性保存循环变量的值 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var test = function() {
var btns = document.getElementsByName('btn');
for(var i = 0; i < btns.length; i ++) {
var btn = btns[i];
btn.setAttribute("index", i);
btn.onclick = function(){
alert( " i: " + this.getAttribute('index'));
}
}
}
</script>
</head>
<body οnlοad="test();">
<input type="button" name="btn" id="btn" value="Test0"><br>
<input type="button" name="btn" id="btn" value="Test1"><br>
<input type="button" name="btn" id="btn" value="Test2"><br>
<input type="button" name="btn" id="btn" value="Test3"><br>
<input type="button" name="btn" id="btn" value="Test4"><br>
<input type="button" name="btn" id="btn" value="Test5"><br>
</body>
</html>