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

Posted 2023-05-09

【中文标题】无法在 for 循环中检索数组值

【英文标题】：Cannot retrieve array values in for loop

【发布时间】：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-wrappertop:0;max-height:100%;

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

任何帮助将不胜感激。

【问题讨论】：

使用clossure或let(let i = 0;)

“控制台日志undefined”是什么意思？我在您的代码中看不到任何 console.log 语句。

还有更具体的吗？谢谢！

【参考方案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);
;