javascript - 使用循环加载图像到 标签

Question

我有以下代码:

$("input[type=file]").change(function readURL()
{
   if (this.files)
   {
      var num = this.files.length;    
      for(var i = 0; i < num ; i++)
      {
         var file = this.files[i];
         var reader = new FileReader();
         reader.onload = function(qi)
         {
            return function()
            {
            $("#img"+(i)).attr('src',event.target.result);
            };
         }(i);
         reader.readAsDataURL(file);
      }
   }
});

还有一些 HTML

<img id="img1" class="img-thumbnail thumnbail">
<img id="img2" class="img-thumbnail thumnbail">
<img id="img3" class="img-thumbnail thumnbail">
<img id="img4" class="img-thumbnail thumnbail">
<img id="img5" class="img-thumbnail thumnbail">
...

我想做的是将所有图像作为缩略图加载到标签，但只加载最后一个。将 console.log(i) 添加到 return 函数显示该函数返回 i 的最后一个值 i 次。我应该怎么做才能让它发挥作用？

Answer 1

你已经正确地创建了一个闭包，这是正确的做法，但你仍然引用来自上层作用域的 i 变量，而不是来自闭包的 qi .

改变这个:

$("#img"+(i)).attr('src',event.target.result);

收件人:

$("#img"+(qi)).attr('src',event.target.result);
//        ^^ use qi here