聖拉斐爾節點選擇

Question

我有很多在聖拉斐爾畫布自動創建rects的，爲了簡單起見這代碼只使用兩個：

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

這產生低於該塊（如圖與在Firefox視圖選擇源）：

<svg height="560" width="560" version="1.1" xmlns="http://www.w3.org/2000/svg"><desc>Created with Raphael</desc><defs></defs><rect class="foo" id="_0" stroke="#000" fill="none" ry="0" rx="0" r="0" height="70" width="70" y="0" x="0"></rect><rect class="foo" id="_1" stroke="#000" fill="none" ry="0" rx="0" r="0" height="70" width="70" y="0" x="100"></rect></path></svg> 

css類指示要填充的顏色。我想單獨使用點擊功能來更改每個矩形的類。我需要這樣的東西：

function change_class() { 
    //something here 
} 

一切從我讀過，這是使用.node完成的，但在這裏我沒有爲每個rect一個獨立的變量，因爲square被覆蓋上的每個迭代for()循環。要做到這一點

一種方法是給所有rects推到一個數組，像這樣：

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

然後我可以直接通過修改類：

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

但是...我仍然不知道如何通過一般功能​​...我需要類似的東西：

$('rect').click(function() { 
    change_class(); // the click function should pass "$(this)" to change_class ? 
}); 

什麼是正確的jQuery +拉斐爾方法來做到這一點？

由於提前， 阿德里安

Answer 1

如果你想點擊文本框本身來改變其顏色，你不需要jQuery的，你可以用拉斐爾的內置事件法，並參考矩形作爲this，像這樣：

​​