js如何取得前端for循环中的某元素的值&&闭包问题

问题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://blog.csdn.net/xiaozji/article/details/43530563