ページ上に複数のオブジェクトがある場合、1つのRaphaelJSオブジェクトのストロークアトリビュートを変更する

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

}