無法檢索for循環中的數組值

Question

我有一個快速noob問題：我試圖檢索數組的值，並使用jQuery「點擊」將它們打印到html元素。但是，我似乎無法檢索數組元素。對於每個點擊的項目，它應該得到索引爲i的數組元素，所以#item-0應得到值"red"等。

控制檯日誌undefined。

var descriptions = ["red", "blue", "green", "purple", "white", "black"]; 
 

 
for (var i = 0; i < descriptions.length; i++) { 
 
    $("#item-" + i).on("click", function() { 
 
    var currentDescr = descriptions[i]; 
 
    console.log(currentDescr); 
 

 
    $("#footer-text").html(currentDescr); 
 
    }); 
 
};

.as-console-wrapper{top:0;max-height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

任何幫助，將不勝感激。

Answer 1

這是因爲當你點擊按鈕時i的值將是descriptions.length（在那一點循環正在中斷），因爲在該索引處沒有值，它將是undefined。

您可以使用let而不是var來解決這個問題，它提供了塊級作用域。

var descriptions = ["red","blue","green","purple","white","black"]; 


for (let i = 0; i < descriptions.length; i++) { 
    $("#item-"+i).on("click", function(){ 
    var currentDescr = descriptions[i]; 
    console.log(currentDescr); 
    $("#footer-text").html(currentDescr); 
    }); 
}; 

---

，或者使用closure function並傳遞i作爲參數。

var descriptions = ["red","blue","green","purple","white","black"]; 


for (let i = 0; i < descriptions.length; i++) { 
    (function(index){ 
    $("#item-" + index).on("click", function(){ 
     var currentDescr = descriptions[index]; 
     console.log(currentDescr); 
     $("#footer-text").html(currentDescr); 
    }); 
    })(i); 
}; 

Answer 2

的循環事件觸發之前完成，導致i不正確的值...試試這個：

var descriptions = ["red","blue","green","purple","white","black"]; 


for (var i = 0; i < descriptions.length; i++) { 

    (function(i){ 
     $("#item-"+i).on("click", function(){ 

      var currentDescr = descriptions[i]; 
      console.log(currentDescr); 
      $("#footer-text").html(currentDescr); 

     }); 
    }(i)); 
};