0

我有一个表面，我根据后端的数据绘制某种动态图像，点击某个区域，我希望发布不同的数据。但我的以下代码总是采用最后绘制的数据来发布。

function renderICD() {
    var totalx=1200;
    var totaly=1000;
    var xOffset = 150;
    var yOffset = 20;

    surface = dojox.gfx.createSurface("icdTab",totalx+2,totaly+2);
    var grid = surface.createGroup();
    var step = 1;
    var xyHolder = {};
    var group = grid.createGroup();

    for(var ii=0;ii<2;ii++)
    {
         var x = (step-1) * (75+85);
         step++;

         var group = grid.createGroup();

         group.createRect({x:xOffset+x+33, y:yOffset+20+90, width: 10, height: 10}).setFill([255, 255, 255, 0.9])
            .setStroke({color:'black' , width:2});


              dojo.connect(group.getEventSource(),"onclick",function(e) {
                       var internal = ii;
                       alert("publishing "+internal);
               //shape was clicked, now do something!
                        });

         grid.createText({x:xOffset+x+33, y:yOffset+20+80, text:ii,align:"middle"})
            .setFill('red')
            .setFont({size: '10px',weight: "bold"});
    }
}

据我了解，仅存在 1 个为处理事件而编写的函数实例，但我要处理的是 2 个不同的事件。我怎样才能做到这一点？

带有 2 个矩形的表面快照，当我单击两个矩形时，我的警报中会出现“2”。

带有 2 个矩形的表面快照，当我单击两个矩形时，我的警报中会出现“2”。

4

1 回答 1

1

JavaScript 有函数作用域，而不是块作用域，所以你只有一个ii变量，当你点击一个矩形时，它总是等于“2”。有很多方法可以解决这个问题，示例如下：

function renderICD() {
    var totalx=1200;
    var totaly=1000;
    var xOffset = 150;
    var yOffset = 20;

    surface = dojox.gfx.createSurface("icdTab",totalx+2,totaly+2);
    var grid = surface.createGroup();
    var step = 1;
    var xyHolder = {};
    var group = grid.createGroup();

    dojo.forEach([0,1], function(item, ii) {
         var x = (step-1) * (75+85);
         step++;

         var group = grid.createGroup();

         group.createRect({x:xOffset+x+33, y:yOffset+20+90, width: 10, height: 10}).setFill([255, 255, 255, 0.9])
            .setStroke({color:'black' , width:2});


              dojo.connect(group.getEventSource(),"onclick",function(e) {
                       var internal = ii;
                       alert("publishing "+internal);
               //shape was clicked, now do something!
                        });

         grid.createText({x:xOffset+x+33, y:yOffset+20+80, text:ii,align:"middle"})
            .setFill('red')
            .setFont({size: '10px',weight: "bold"});
    });
}
于 2013-07-08T16:16:43.200 回答