onclick - 当页面上有多个对象时，更改单个 RaphaelJS 对象的笔划属性

Question

我的 Canvas 上有一大堆矩形。

我想更改用户点击的任何矩形的笔画，以及运行其他一些 javascript。我的简化代码如下。

var canvas = Raphael("test");
var st = canvas.set();

for (var i = 0; i < 2; i++) {
   var act = canvas.rect(///edited for brevity////).attr({"stroke":"none"});
   st.push(act)

   act.node.onclick = function() {
      st.attr({stroke: "none"});
      act.attr({stroke: "yellow"});
   }   
}

现在，无论我点击哪个矩形，它只会改变最后绘制的矩形上的描边。

有什么想法吗？

Answer 1

这不是 Raphaël 问题，而是缺乏对闭包的理解。可以通过自调用函数轻松修复:

for (var i = 0; i < 2; i++) {
    var act = canvas.rect(///edited for brevity////).attr({"stroke":"none"});
    st.push(act)


    (function (act) {
       act.node.onclick = function() {
           st.attr({stroke: "none"});
           act.attr({stroke: "yellow"});
       }
    })(act);   
}