Ändern des stroke-Attributs für ein einzelnes RaphaelJS-Objekt, wenn sich mehrere Objekte auf der Seite befinden

Question

Ich habe eine Menge Rechtecke auf meiner Leinwand.

Ich möchte den Strich ändern, auf welchem Rechteck der Benutzer klickt, sowie einige andere JavaScript-Funktionen ausführen. Mein vereinfachter Code ist unten aufgeführt.

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

Im Moment ändert sich beim Klicken auf ein Rechteck nur der Strich des zuletzt gezeichneten Rechtecks.

Irgendwelche Ideen?

Answer 1

Kein Raphaël-Problem, sondern eher ein Mangel an Verständnis für Closure. Kann leicht durch Selbstaufruf-Funktion behoben werden:

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

//Probieren Sie es aus und dann verfeinern Sie es

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

}