동적으로 생성 된 변수와 관련된 문제

Question

아래의 버튼 이벤트에서 다른 전역 변수 (AvGen.svg1, AvGen.svg2 등)에 동적으로 액세스하려고하지만 변수에 관계없이 어떤 이유로 변수가 작동하지 않습니다 'svg'는 AvGen.svg1을 'add'메소드에 직접 넣는 것과 동일합니다 (예 : AvGen.svg1).

어떻게 작동하지 않습니까?

AvGen = { 

    currSvg: 0, 
    svg1: null, 
    svg1: null, 

    init: function() { 
     AvGen.loadSVG(); 
     AvGen.toolBox(); 
    }, 

    loadSVG: function() { 
     AvGen.svg1 = [0,0,255.3,298.5,{type:'path',path:'M 35.3 257.2 C 34.4 245.7 45.4 234.1 48.5 223 C 53.6 204.3 55 185 60 166.2 C 69.5 131 69.6 97.1 89.1 65.1 C 103.4 41.7 129.5 5.3 161.3 19.7 C 184.6 30.3 181.3 59.2 188.9 78.9 C 207.5 127.3 228.6 184.8 230.3 237.3 C 231.3 268.6 202.8 261.3 178.2 264 C 149.2 267.1 120 269.6 91 272.2 C 84.2 272.8 75.8 274.2 69 273 C 60.9 271.6 28.9 259.9 31.3 249.2','fill':'#39b54a','stroke':'none','stroke-width':'0','fill-opacity':'1','stroke-opacity':'0'}]; 
     AvGen.svg2 = [0,0,278.9,314.1,{type:'path',path:'M 32 265 C 31.8 245.2 38 226.9 39.8 207.3 C 41.9 184.4 42 161.7 42 138.7 C 42 121.8 36.5 96.1 45.2 81.3 C 51.3 70.9 50.4 75.9 58 79.2 C 67.5 83.4 70.7 82.8 80.4 79 C 114.7 65.7 149.9 35.5 188.7 41.1 C 211.7 44.5 221.2 57.5 226.2 79.1 C 228.8 90.1 230.1 101.6 231.8 112.9 C 234.7 132.3 233.3 154.3 238.8 173 C 246.5 199.5 258.6 237.3 252 265.8 C 248.9 279.6 231.6 278.3 219.1 279.8 C 191.1 283 164 287 135.8 287 C 109.3 287 75.5 292.8 50 285.3 C 38.6 281.9 31.7 275.2 33 263','fill':'#8dc63f','stroke':'#8dc63f','stroke-miterlimit':'10','stroke-width':'0','fill-opacity':'1','stroke-opacity':'0'}]; 
     AvGen.paper = Raphael("avatarBox",300,300); 
    }, 

    toolBox: function() { 
     var moveRightBtn = $('#moveRightBtn'); 

     moveRightBtn.on('click', function(){ 
      AvGen.paper.clear(); 
      AvGen.currSvg += 1; 

      var svg = 'AvGen.svg' + AvGen.currSvg; 
      console.log(svg); // <--- AvGen.svg1 
      AvGen.paper.add(svg); 
      // AvGen.paper.add(AvGen.svg1); <--- works 
     }); 
    }, 
}; 

편집 : 버튼을 클릭하면 나는 콘솔에서 이렇게 이제까지 무엇 오류를 얻을 수 없습니다.

Answer 1

이 시도 :

AvGen = { 

    currSvg: 0, 
    svg: [], 

    init: function() { 
     AvGen.loadSVG(); 
     AvGen.toolBox(); 
    }, 

    loadSVG: function() { 
     AvGen.svg.push([0,0,255.3,298.5,{type:'path',path:'M 35.3 257.2 C 34.4 245.7 45.4 234.1 48.5 223 C 53.6 204.3 55 185 60 166.2 C 69.5 131 69.6 97.1 89.1 65.1 C 103.4 41.7 129.5 5.3 161.3 19.7 C 184.6 30.3 181.3 59.2 188.9 78.9 C 207.5 127.3 228.6 184.8 230.3 237.3 C 231.3 268.6 202.8 261.3 178.2 264 C 149.2 267.1 120 269.6 91 272.2 C 84.2 272.8 75.8 274.2 69 273 C 60.9 271.6 28.9 259.9 31.3 249.2','fill':'#39b54a','stroke':'none','stroke-width':'0','fill-opacity':'1','stroke-opacity':'0'}]); 
     AvGen.svg.push([0,0,278.9,314.1,{type:'path',path:'M 32 265 C 31.8 245.2 38 226.9 39.8 207.3 C 41.9 184.4 42 161.7 42 138.7 C 42 121.8 36.5 96.1 45.2 81.3 C 51.3 70.9 50.4 75.9 58 79.2 C 67.5 83.4 70.7 82.8 80.4 79 C 114.7 65.7 149.9 35.5 188.7 41.1 C 211.7 44.5 221.2 57.5 226.2 79.1 C 228.8 90.1 230.1 101.6 231.8 112.9 C 234.7 132.3 233.3 154.3 238.8 173 C 246.5 199.5 258.6 237.3 252 265.8 C 248.9 279.6 231.6 278.3 219.1 279.8 C 191.1 283 164 287 135.8 287 C 109.3 287 75.5 292.8 50 285.3 C 38.6 281.9 31.7 275.2 33 263','fill':'#8dc63f','stroke':'#8dc63f','stroke-miterlimit':'10','stroke-width':'0','fill-opacity':'1','stroke-opacity':'0'}]); 
     AvGen.paper = Raphael("avatarBox",300,300); 
    }, 

    toolBox: function() { 

     moveRightBtn.on('click', function(){ 
      AvGen.paper.clear(); 
      AvGen.currSvg += 1; 

      var svg = AvGen.svg[AvGen.currSvg-1]; 
      AvGen.paper.add(svg); 
     }); 
    }, 
};