博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js如何取得前端for循环中的某元素的值&&闭包问题
阅读量:6086 次
发布时间:2019-06-20

本文共 2083 字,大约阅读时间需要 6 分钟。

hot3.png

问题1:

在写商城的时候,想给通过for循环打印出的商品上,每个小栏目都添加一个删除按钮。但是该如何让js响应删除,并获取到该元素的值呢?换句话说,就是有不定个的按钮,且点击按钮时都需要执行一个方法(参数不一样)。

我想到的解决办法是,动态生成id,js中使用for循环统一解析。

问题2:

js中的for循环,需要一个vos的size值,也就是商品的总数。问题是,在我的html中可以获取到vossize的值,但是js中就是获取不到。

之后考虑到时js和html的加载顺序问题,所以把js引入都放入了body的最后,问题结局。

问题3:(闭包)

之后又产生了一个问题,js中for循环的每一个function都只能读取到最后一个元素的值,为什么?

网上找到了这样的回答:

原因:(闭包)

因为在for循环里面指定给list_obj[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。

解决:

既然已经知道函数调用外部变量的时候就构成了一个闭包,里面的变量会受到别的地方的影响,那么我们

现在要做的就是,构建一个只有自己本身才可访问的闭包,保存只供本身使用的变量。

用一层i的新的function包围:

var list_obj = document.getElementsByTagName('li');    for (var i = 0; i <= list_obj.length; i++) {            (function(i){          //var p = i              list_obj[i].onclick = function() {                    alert(i);                }     })(i);  }

 

我的代码:

for(var i=1;i<=$("#vossize").val();i++){    var a="_"+i;    (function (a) {        $(document).ready(function(){            $("#btn_addtocart"+a).click(function(){                var dataJson = {                    goodsid:$("#add_goodsid"+a).val()                };                $.ajax({                    url:"/addToCart",                    type:"post",                    data:dataJson,                    contentType:"application/x-www-form-urlencoded",//默认为此,设置发送给后端的类型                    dataType:"json",//设置接收后端的数据的类型                    async:true,//设置异步,不然可能接收不到后端返回的json                    success:function(data){                        if(data.code==0){                            //window.location="/cart/";                        }                        else {                            alert(data.msg);                            window.location.reload();                        }                    },                    fail:function () {                        alert("ssss");                    }                });            });        });    })(a);}

 

转载于:https://my.oschina.net/u/3786691/blog/1824102

你可能感兴趣的文章
0415第七周学习进度条
查看>>
ps 网页配图设计
查看>>
EXTJS布局示例(panel,Viewport,TabPanel)
查看>>
php安装xunserch
查看>>
GCC builtin vector (gcc内建函数)学习
查看>>
高性能的JavaScript--数据访问(1)
查看>>
Fire Game
查看>>
base64编码解码
查看>>
java基础讲解06-----字符串
查看>>
会计的思考(44):史上最富有的会计--洛克菲勒的会计视角
查看>>
宏的写法和特点
查看>>
OC门的工作原理
查看>>
《Spring1之第八次站立会议》
查看>>
关于mysql的初步学习 (一)
查看>>
VB6在win10下的使用经验
查看>>
DB2数据库中得到当前年月日,时分秒的语句
查看>>
IOS第三方地图-百度地图集成
查看>>
swift学习网站
查看>>
DocumentFragments
查看>>
HTTP-web-Internet
查看>>