JavaScript保存循环变量的值的两种方法

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript button input generator function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csz_363874279qqcom/article/details/7294350
版权

问题描述：为多个元素动态添加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>


每一步都要留下深脚印
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript入门笔记
05-15
var 变量名1=值,变量名2=值,变量名3; 3、变量名命名规范 1、由字母，数字，下划线以及 $ 组成 var user_name; 正确 var user-name; 错误 var $uname; 正确 2、不能以数字开头 var 1name;错误 3、不能使用JS...
js 里面for循环包着onclick的奇妙故事
weixin_38689203的博客
09-18 844
故事的开头是我想点击页面的每一个p标签都让他们的内容变成happy。 于是我敲下了如下代码 <!-- html部分 --> <body> <p>aaaaa</p> <p>bbbbb</p> <p>ccccc</p> <p>d...
关于js for循环click事件
zanghui426的专栏
04-06 965
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function onM...
for循环保存i值的方法
weixin_30716141的博客
06-29 1502
通常情况下，因为一些效果我们需要获取到for循环中的i的值，但是往往拿到的都是最后一个i的值。下面介绍几种方法可以获取到i的值 1.自定义属性 arr[i].index = i; 2 自执行函数： for(var i = 0 ; i < 5; i++){ (function(n){ setTimeout(function(){ console.log(n) }...
解决javascript的var变量无法保存el表达式中session域对象的值的的问题
巩大星的博客
11-06 961
在SpringMVC+mybatis中遇到一个这样的问题，后台control中通过model.addAttribute("product","test1");后，前台js可以通过 var product=${product}获得。 但是control中保存在session中的通过var user=${sessionScope.user}就获取不了。 在console.log中查看了一下，发现
JS 闭包问题- for循环取 i
u010565037的博客
03-24 861
问题描述： html lang="en"> head> meta charset="UTF-8"> title>title> script type="text/javascript">        functiononMyLoad(){        var arr = document.getElementsByTagName("p");        for(v
for循环中变量的值无法保存下来
Sue040724的博客
12-29 551
for循环中变量的值无法保存下来？？？
JavaScript笔记
09-28
--其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象* C：var compare=new Function('a','b','return a-b') ---| --其实js底层就是new Function;构造函数中的...
javascript完全学习手册1 源码
04-12
两种方式 168 7.3.2 RegExp对象的属性 170 7.3.3 RegExp对象的方法 173 7.4 String对象中与正则表达式 有关的方法 177 第8章 高级DOM技术 182 8.1 CSS样式 182 8.1.1 CSS语法 182 8.1.2 CSS属性 187 8.2 样式控制 ...
javascript完全学习手册2 源码
04-12
7．3．1 创建RegExp对象实例的两种方式 7．3．2 RegExp对象的属性 7．3．3 RegExp对象的方法 7．4 String对象中与正则表达式有关的方法 第8章 高级DoM技术 8．1 CSS样式 8．1．1 CSS语法 8．1．2 CSS属性 8．2 样式...
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
4.5.htm 把表达式赋值给一个变量的方法 4.6.htm 演示了两个符号的区别 4.7.htm “!==”和“===”的演示 4.8.htm 逗号表达式的连接应用 4.9.htm 对表达式进行“Void”运算 ...
js中把已知对象循环遍历出来再存入新的数组中
热门推荐
cuizongliang123的博客
10-30 3万+
var Array=[]; Array.push(new ObjStory(12,‘大家去看海',‘李大胆',‘文艺类')); Array.push(new ObjStory(14,‘大家去看天',‘李小胆',‘文艺类')); 实例：     function inputStore(orderform_no){  //已知数据对象  var rows =
JavaScript数组forEach方法
Qiemo_的博客
05-01 1万+
1.forEach数组方法的作用 遍历数组 2.语法:array.forEach( function ( item, index,arr) {} ) 第一个参数: item,必须,当前元素的值 第二个参数 : index,可选,当前元素在数组中的索引值 第三个参数 : arr,当前元素所处的数组对象 3.forEach方法特点 (1)循环次数 === 数组长度 (2)函数内部的return 没有返回值 (3)forEach方法的返回值 没有返回值 4.注意点: (1)forEach
js数组的forEach()方法
xuxiaoping1989的博客
04-14 4623
1.  js 数组循环遍历。 数组循环变量，最先想到的就是 for(var i=0;i 除此之外，也可以使用较简便的forEach 方式 2.  forEach 函数。 var array=[1,2,3,4,5]; array.forEach(function(e){ alert(e) }); forEach函数的参数e是每次循环的数组元素。
JS点击计数存储案例
Fleehom的博客
09-02 1900
项目功能要求： 点击页面红色块默认不计数； 点击开始按钮后再点击红色块则开始计数； 点击结束按钮后再点击红色块则不计数； 关闭页面并再次打开页面，界面会显示上次关闭页面时的计数值。 代码设计： 本项目结合了前端页面的设计和JS的使用。具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击计数</title> <sty
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 612
步骤很详细，直接上教程……
JavaScript获取后台C#变量以及后台方法
05-31
2. 在前端JavaScript代码中使用XMLHttpRequest对象向后台发送请求，获取变量的值。 例如，假设后台定义了一个公共变量varName，需要在前端获取该变量的值： 后台代码： ``` public string varName = "Hello World...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值