JavaScript保存循环变量的值的两种方法
来源：互联网 发布：蚁群,模拟退火算法 编辑：程序博客网 时间：2024/05/16 18:18
问题描述：为多个元素动态添加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 onload="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 onload="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 onload="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>
- JavaScript保存循环变量的值的两种方法
- 两种方法交换变量的值
- javascript for循环的两种写法
- for循环保存i值的方法
- 图片保存的两种方法
- Oracle批量保存的两种方法
- 循环显示图片的两种方法
- Kettle实现循环的两种方法
- 循环 ViewPager 的两种实现方法
- 交换两个变量的值的两种方法
- 变量交换的两种方法
- 变量Map的两种方法
- Eclipse debug 改变变量的值(两种方法)
- JavaScript中几种常用的解决for循环中引用同一循环变量对象的方法
- Javascript 创建对象的两种方法
- javascript实现继承的两种方法
- Javascript 两种定义Function的方法
- javascript遍历数组的两种方法
- 静态方法只能被继承，而不能被重写
- NoSQL运动：数据库架构抉择
- 2012/3学习暂行计划
- MyEclipse 相关有用设置
- 八款JS框架介绍及比较
- JavaScript保存循环变量的值的两种方法
- hdu1248
- enied for user 'root'@'localhost' (using password: YES)
- spring主要的作用
- 控制台应用程序输出小技巧
- 装修顺序
- DLL编写教程
- C++学习第6篇-程序流程控制
- 习题6.15查找二叉树结点公共祖先
