我正在发现 Raphael JS,我有一个关于在 for 循环中生成的元素上应用鼠标事件的问题。
这是一个打印 5 个矩形的示例代码:
var paper = Raphael("canvasTest",200,200);
for(var i = 0 ; i < 5 ; i++){
var rect = paper.rect((i*15)+5,10,10,10);
rect.attr("fill","blue");
rect.hover(
function(){
rect.attr("fill","red");
document.getElementById("info").innerHTML="Hovered: "+i;
},
function(){
rect.attr("fill","blue");
}
);
}
这会生成以下输出:
问题是只有第 5 个矩形变成红色(即使另一个矩形悬停),并且info
div 总是打印第 5 个矩形悬停:
我发现我可以this
在内部函数内部使用它并部分解决了问题。上面的代码将正确的矩形涂成红色,但信息容器仍然打印出第 5 个矩形悬停。
rect.hover(
function(){
this.attr("color","red");
...
},
...
);
解决这个问题的最干净的方法是什么?我正在考虑为rect
诸如设置自定义字段rect.someVariable=i
,然后在内部函数中引用它。但也许有更清洁的东西?
在此先感谢您的帮助。