为每个Raphael对象设置事件处理程序

Question

我有一个简单的脚本，它从一个数组创建几个Raphael对象，然后为每个分配事件处理程序。问题是只有最后一个事件处理程序正在为所有对象执行。我在这里做错了什么？

var blockDiagram = { 
    "block" :[ 
    { 
     "width": 100, 
     "height": 100, 
     "text" : "this is block 1", 
     "cx": 10, 
     "cy": 10, 
     "fill" : "blue" 
    }, 
    { 
     "width": 100, 
     "height": 100, 
     "text" : "this is block 2", 
     "cx": 120, 
     "cy": 10, 
     "fill" : "yellow" 
    }, 
    { 
     "width": 100, 
     "height": 100, 
     "text" : "this is block 3", 
     "cx": 230, 
     "cy": 10, 
     "fill" : "red" 
    } 
    ] 
}; 

var paper = new Raphael("holder", 700, 700) 

for (i=0; i< blockDiagram.block.length; i++) 
{ 
    ms = 500; 
    width = blockDiagram.block[i].width; 
    height = blockDiagram.block[i].height; 
    text = blockDiagram.block[i].text; 
    cx = blockDiagram.block[i].cx; 
    cy = blockDiagram.block[i].cy; 
    fill = blockDiagram.block[i].fill; 
    p = paper.rect(cx,cy, width, height).attr({"fill": fill}); 
    txt = paper.text(cx ,cy, text).attr({fill: 'black', stroke: "none", opacity: 0, "font-size": 15}); 
    p.mouseover(function() {    
      txt.stop().animate({opacity: 1}, ms); 
     }).mouseout(function() { 
      txt.stop().animate({opacity: 0}, ms); 
     }); 

} 

Answer 1

可以使元素列表与Paper.set()

var set = paper.set(); 

for(var i = 0; i< blockDiagram.block.length; i++) { 
    var width = blockDiagram.block[i].width, 
    height = blockDiagram.block[i].height, 
    text = blockDiagram.block[i].text, 
    cx = blockDiagram.block[i].cx, 
    cy = blockDiagram.block[i].cy, 
    fill = blockDiagram.block[i].fill; 

    var p = paper.rect(cx,cy, width, height).attr({ 
    block: blockDiagram.block[i], // here the custom attribute gets set (block object) 
    fill: fill 
    }); 
    set.push(p); 
} 

我说什么作为属性block是Paper.customAttributes创建一个自定义属性。所以你可以将信息附加到任何元素。

这就是我创建的block属性：

paper.customAttributes.block = function(block) { 
    return { 
    block: block 
    }; 
}; 

所以调用带有参数的属性时，它会以其他方式设置在返回之前

现在，最好的部分所设置的值，我们可以将处理程序到整个集合并获取在额外属性中设置的信息！

var txt; 
set.mouseover(function (e) { 
    var block = this.attr('block'); // getting the attribute (the block object with the data) 

    txt = paper.text(block.cx ,block.cy, block.text).attr({fill: "black", stroke: "none", opacity: 0, "font-size": 15}); 
    txt.stop().animate({opacity: 1}, ms); 
}).mouseout(function (e) { 
    txt.stop().animate({opacity: 0}, ms); 
}); 

我做了一个fiddle让你检查出来。当然，这可以改进，但我希望你明白。

Answer 2

根据this示例找到了另一个解决方案。对于任何可能感兴趣的人。

var blockDiagram = { 
    "block" :[ 
    { 
     "width": 100, 
     "height": 200, 
     "text" : "this is block 1", 
     "cx": 10, 
     "cy": 10, 
     "fill" : "blue" 
    }, 
    { 
     "width": 100, 
     "height": 100, 
     "text" : "this is block 2", 
     "cx": 120, 
     "cy": 10, 
     "fill" : "yellow" 
    }, 
    { 
     "width": 100, 
     "height": 100, 
     "text" : "this is block 3", 
     "cx": 230, 
     "cy": 10, 
     "fill" : "red" 
    } 
    ] 
}; 


Raphael.fn.BlockDiagram = function (blockDiagram) { 
var paper = this,  
    Blocks = this.set(); 

function square(cx, cy, width, height, params) {  
    return paper.rect(cx, cy, width,height).attr(params); 
} 

var process = function (i) { 
     var width = blockDiagram.block[i].width, 
      height = blockDiagram.block[i].height, 
      text = blockDiagram.block[i].text, 
      cx = blockDiagram.block[i].cx, 
      cy = blockDiagram.block[i].cy, 
      fill = blockDiagram.block[i].fill,    
      ms = 500,     
      p = square(cx, cy, width, height,{fill: fill}), 
      txt = paper.text(cx , cy, text).attr({fill: fill, stroke: "none", opacity: 0, "font-size": 20}); 
     p.mouseover(function() { 
      p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "gradient"); 
      txt.stop().animate({opacity: 1}, ms, "gradient"); 
     }).mouseout(function() { 
      p.stop().animate({transform: ""}, ms, "gradient"); 
      txt.stop().animate({opacity: 0}, ms); 
     }); 
     Blocks.push(p); 
     Blocks.push(txt); 
    }; 

for (i = 0; i < blockDiagram.block.length; i++) { 
    process(i); 
} 
return Blocks; 
}; 

$(function() { 
Raphael("holder", 500, 500).BlockDiagram(blockDiagram); 
});