2017-12-24 218 views
6

Po 3 bloku kodu, chcesz wygenerować za pomocą pętli/tablicy, aby utworzyć krótki kod. Wiem, że korzystanie z pętli nie jest wielką rzeczą, ale dla mnie trudno jest zmienić licznik ze zmienną "openFile", chcę counter counter z zmienną "openFile" jak openFile1, openFile2 i openFile3 z każdą iteracją pętli.Potrzebujesz pomocy, aby wygenerować trzy bloki za pomocą pętli

$(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]); 
     }; 


     }); 
+0

Linia ma oczywisty błąd 'var openFile '+ i +'; = funkcja (zdarzenie) {. Usuń '' + i + '; ' – forumulator

+0

@forumulator, chcę tylko zmienić openFile1, openFile2, openFile3, openFile4, openFile5 i openFile6 przy każdej iteracji pętli. – Super

+0

Jaki jest twój zamiar, co próbujesz zrobić z sześcioma funkcjami, exaclty? Nie możesz robić tego, co opisujesz. Najlepszy scenariusz, utwórz tablicę i dodaj do niej funkcje. – forumulator

Odpowiedz

10

Po prostu utwórz funkcję, która bierze pod uwagę jako arg i zwraca funkcję, która przyjmuje właśnie wydarzenie jako arg. ze względu na zamknięcie, wartość "count" podana podczas wywoływania openFile z podaną wartością count zostanie użyta dla funkcji wewnętrznej.

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]); 
     }; 
    } 

Teraz można uzyskać trzy funkcje odpowiadające co zrobiłeś dzwoniąc mapę takiego:

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

Każda funkcja w tej tablicy jest taka sama jak to, co miał.

+0

@ user123 to odpowiedź na twoje pytanie. Jeśli nie, czego jeszcze potrzebujesz? –

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]); 
      } 
     } 
} 
1

Próbowałem uogólniać kod

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

} 

Ale nadal wydaje się, że masz 3 kontroli przesyłania plików i chcesz wyświetlić podgląd dla każdego, tak jest?

2

Być może to zadziała.

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);