JavaScript保存循环变量的值的两种方法
2012-02-26 00:22
323 查看
问题描述：为多个元素动态添加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>
首先，循环变量未被保存的情况
<!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 正则表达式中用变量的两种方法
- ASP.NET向Javascript传递变量两种实现方法
- JavaScript中几种常用的解决for循环中引用同一循环变量对象的方法
- Flex ：HTTPService处理XML文件的两种方法, Asp生成Xml的方法，以及Flex定义变量、赋值的运用。。。。
- javascript隐藏控件的两种方法（转）
- JavaScript各变量类型的判断方法
- Lua语言教程1 ——【变量输出，方法输出，if语句和for循环语句！】
- 给成员变量赋值的两种方法
- Javascript获取鼠标的位置, 获取Html控件的绝对位置的两种方法
- JavaScript 模块的循环加载实现方法
- 静态通讯录，电话本，两种方法，一种变量，一种类型
- javaScript【创建对象、创建类、成员变量、方法、公有和私有、静态】
- JavaScript 模拟类机制及私有变量的方法及思路
- php 下载保存文件保存到本地的两种方法
- javascript 动态生成css代码的两种方法
- javascript修改属性的两种方法和访问文本
- JavaScript控制CheckBoxList单选两种方法
- 使用JavaScript判断用户输入的是否为正整数(两种方法)
- JavaScript两种方法来定义一个函数