需要帮助使用循环生成三个块

Question

在3块代码之后,想要生成使用循环/数组来制作短代码.我知道使用循环并不是一件大事,但对我来说很难用变量"openFile"来改变计数器,我希望计数器增量变量" openFile"就像openFile1,openFile2和openFile3一样,每次迭代循环.

$(function() {

            var openFile1 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img1');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };



      var openFile2 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img2');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };

      var openFile3 = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img3');
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
      };


       });

Answer 1

只需创建一个将计数作为arg的函数,并返回一个仅将事件作为arg的函数.由于关闭,当使用给定的count值调用openFile时给出的'count'值将用于内部函数.

  var openFileFunc = function(count) {
    return
        function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          var dataURL = reader.result;
          var output = document.getElementById('img'+(count+1));
          output.src = dataURL;
        };
        reader.readAsDataURL(input.files[count]);
      };
    }

现在你可以通过调用这样的地图来获得与你所做的相同的三个功能:

var functions = [1,2,3].map(openFileFunc)

此数组中的每个函数都与您拥有的函数相同.