无法在 for 循环中检索数组值答案

【问题标题】：Cannot retrieve array values in for loop无法在 for 循环中检索数组值
【发布时间】：2017-05-27 12:35:56
【问题描述】：

我有一个快速的菜鸟问题：我正在尝试检索一个数组的值，并使用 jQuery “on Click”将它们打印到一个 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%;}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

任何帮助将不胜感激。

【问题讨论】：

使用clossure或let(let i = 0;)
“控制台日志undefined”是什么意思？我在您的代码中看不到任何 console.log 语句。
还有更具体的吗？谢谢！

标签： javascript jquery arrays for-loop

【解决方案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));
};

【讨论】：

我做了一个演示并面临同样的问题，但您的解决方案有所帮助。 jsfiddle.net/ohzcvqvk

【解决方案2】：

发生这种情况是因为当您单击按钮时，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);
};

【讨论】：