动态创建变量的问题

时间:2013-06-10 20:29:06

标签: jquery click dynamically-generated

我正在尝试在下面的按钮事件中动态访问不同的全局变量(AvGen.svg1,AvGen.svg2等),但由于某种原因,即使变量'svg'变为同样(例如AvGen.svg1)将AvGen.svg1直接放入'add'方法。

怎么会不起作用?

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

编辑:点击按钮时,我在控制台中没有出现任何错误。

1 个答案:

答案 0 :(得分:0)

试试这个:

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