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