jQuery는 각각 마지막 요소 인 Google 차트 API 만 반환합니다

Question

배열을 가져 와서 해당 텍스트가 배열의 요소 인 동적으로 QR 코드를 페이지에 추가하는 다음 코드를 작성했습니다. 어떤 이유로 QR 코드는 바이올린 창에 표시되지 않지만

$(document).ready(function() { 
      var list = ['dog', 'cat', 'mouse', 'hippo', 'ox']; 
      var qrUrl = 'https://chart.googleapis.com/chart?'; 

      //functions 
      function getQrCodes(array) { 

       $.each(array, function (ix, val) { 
        //options gets chl property redefined for each element 
        //in the array 
        var options = { 
         cht: 'qr', 
         chs: '300x300', 
         chl: array[ix] 
        } 
        qrOptionArray.push(options); 
        console.log('this qr should be: ' + array[ix]); 
        console.log(qrUrl + $.param(options)); 
        var $img = $('img').attr('src', qrUrl + $.param(options)).appendTo('body'); 

       }); 

      } 

      getQrCodes(list); 
     }); 

당신은 바이올린 here에서 콘솔 출력을 볼 수 있습니다, 그들은 내 로컬 컴퓨터에서 수행. 내가 가진 문제는 어레이의 각 요소에 대한 콘솔 출력 변경 사항을 볼 수 있다는 사실에 관계없이 마지막으로 배열의 마지막 요소가 X 번 반복되는 것입니다. 각 QR 캔은 콘솔 출력이 올바른 경우에도 'ox'를 스캔하여 인쇄합니다. 무슨 일 이니?

Answer 1

append 본문에 대한 선택자가 잘못되었습니다. 새 요소를 새로 만들려면 기존 요소 인 img을 모두 선택해야합니다. 이 시도 :

var $img = $('<img />').attr('src', qrUrl + $.param(options)).appendTo('body'); 

Example fiddle

참고 : $('<img />')하지 $('img').