Question

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

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个不同的事件。我怎样才能做到这一点？

Snapshot of surface with 2 rects, when i click on both rects, i get '2' in my alert.

带有2个rects的曲面快照，当我点击两个rects时，我在警报中得到'2'。

Answer 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"});
    });
}

道场表面的事件处理

1 个答案: