【问题标题】:Issue with dynamically created variables动态创建变量的问题
【发布时间】:2013-06-10 20:29:06
【问题描述】:

我正在尝试在下面的按钮事件中动态访问不同的全局变量(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
        });
    },
};

编辑:单击按钮时,我在控制台中没有收到任何错误。

【问题讨论】:

  • 什么是 moveRightBtn 元素?它是动态生成的还是在声明这个点击处理程序之后生成的?
  • @roasted:更新了 Q!
  • 当你调用 toolBox 时,$('#moveRightBtn') 是否已经在 DOM 中?我的意思是 alert($('#moveRightBtn').length);返回 1?顺便说一句,您应该告诉我们“它不起作用”是什么意思。控制台错误还是什么???
  • 如果未注释时此行有效:AvGen.paper.add(AvGen.svg1);忘记我之前的评论
  • 是的,它已经在 DOM 中,是的 AvGen.paper.add(AvGen.svg1);作品。更新了 Q 顺便说一句。

标签: jquery click dynamically-generated


【解决方案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);
        });
    },
};

【讨论】:

  • 感谢您的回答!试过了,但我得到“TypeError:AvGen.svg is undefined”:/
猜你喜欢
  • 2017-10-21
  • 2021-04-06
  • 1970-01-01
  • 2023-03-12
  • 1970-01-01
  • 2021-08-13
  • 1970-01-01
  • 1970-01-01
  • 2021-12-20
相关资源
最近更新 更多