Question

我的画布上有很多小册子。

我想在用户点击的任何内容上更改笔划，以及运行其他一些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);   
}

Answer 2

//尝试然后修饰

st[i].click(function (e) 
{ 
    this.attr({stroke: "yellow"});

}

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

2 个答案: