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

Posted 2023-02-25

【中文标题】需要帮助使用循环生成三个块

【英文标题】：Need help to generate three blocks using loop

【发布时间】：2018-06-06 11:20:16

【问题描述】：

以下 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]);
      ;


       );

【问题讨论】：

该行有一个明显的错误var openFile'+i+'; = function(event) 。删除'+i+';

@forumulator，我只想在每次循环迭代时更改 openFile1、openFile2、openFile3、openFile4、openFile5 和 openFile6。

你的意图是什么，你想用六个函数做什么，exaclty？你不能做你所描述的。最佳情况下，创建一个数组并向其中添加函数。

@user123：不，坏主意。请改用数组。 openFile[0]、openFile[1]等

@Sergio Tulentsev，问题已更新，请回答

【参考方案1】：

只需创建一个以计数为 arg 的函数，并返回一个仅以事件为 arg 的函数。由于闭包，调用 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)

这个数组中的每个函数都和你的一样。

【讨论】：

@user123 可以回答您的问题。如果没有，你还需要什么？

【参考方案2】：

var openFile = function(arrOfCount)
    var reader; 
    for(i=0;i<arrOfCount;i++)
       reader= new FileReader();
       return  function(event)
             var input = event.target;
             reader.onload = function()
                  var dataURL = reader.result;
                  var output = document.getElementById('img'+(i+1));
                  output.src = dataURL;
              ;
            reader.readAsDataURL(input.files[i]);
          
      

【参考方案3】：

也许这对你有用。

function callFunctionNtimes(totalCount)

        for(start=1;i<=totalCount;i++)
        
            var filevar = 'openFile'+start;
            filevar = function(event) 
            
                var input = event.target;
                var reader = new FileReader();
                reader.onload = function()
                
                    var dataURL = reader.result;
                    var output = document.getElementById('img'+start);
                    output.src = dataURL;
                ;
                    reader.readAsDataURL(input.files[0]);
            ;
        
     
       //to call n time below function  
       var totalCount = 3;
       callFunctionNtimes(totalCount);

【参考方案4】：

我试图概括代码

 var allImages = document.getElementsByClassName("my-images");
 for (var i = 0; i < allImages.length; i++) 
      var openFile = function(event) 
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function()
          var dataURL = reader.result;
          var output = allImages[i];
          output.src = dataURL;
        ;
        reader.readAsDataURL(input.files[0]);

但您似乎仍然有 3 个文件上传控件，并且您想为每个控件显示预览，是这样吗？