javascript - 无法在 for 循环中检索数组值

Question

我有一个快速的新手问题:我正在尝试检索数组的值并使用 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 的值不正确...试试这个:

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));
};