Raphael Knotenauswahl

Question

Ich habe viele Rechtecke automatisch auf einer Raphael-Leinwand erstellt, zur Vereinfachung verwendet dieser Code nur zwei:

for (i = 0; i < 2; ++i) {
    var square = paper.rect(0 + 100*i, 0, 70, 70);
    square.node.setAttribute('id', '_' + i);
    square.node.setAttribute('class', 'foo');
}

das erzeugt diesen Abschnitt unten (wie im Firefox mit "Ansicht auswählen Quelle" gesehen):

Mit Raphael erstellt

Die CSS-Klasse gibt die Füllfarbe an. Ich möchte die Klasse für jedes Rechteck einzeln mit einer Klickfunktion ändern. Ich bräuchte so etwas wie:

function change_class() {
    // hier etwas
}

Nach allem, was ich gelesen habe, wird dies mit .node gemacht, aber hier habe ich keine separate Variable für jedes rect, da square bei jeder Iteration der for() Schleife überschrieben wurde.

Ein Weg, dies zu tun, wäre alle Rechtecke in ein Array zu schieben, so:

squares = [];
for (i = 0; i < 2; ++i) {
    var square = paper.rect(0 + 100*i, 0, 70, 70);
    square.node.idx = i;
    square.node.setAttribute('class', 'foo');
    squares.push(square);
}

Dann könnte ich die Klasse direkt ändern über:

squares[0].node.setAttribute('class', 'other');

ABER... Ich weiß immer noch nicht, wie das über die allgemeine Funktion change_class() gemacht werden soll... Ich brauche so etwas wie:

$('rect').click(function() {
    change_class(); // sollte die Klickfunktion "$(this)" an change_class weitergeben?
});

Was wäre die richtige jQuery + Raphael-Methode, um dies zu tun?

Danke im Voraus, Adrian

Answer 1

Wenn Sie auf die Box selbst klicken möchten, um ihre Farbe zu ändern, benötigen Sie kein jQuery, Sie können die im Raphael eingebaute Eventmethode verwenden und das Rechteck als this bezeichnen, wie folgt:

     rect.click( function () {
        this.node.setAttribute('class', 'newClass');
     });