Snap.svg，我該如何處理類似對象的組？ （Like classes）

Question

我剛剛發現了用於在JavaScript中處理svg圖像的Snap.svg庫。是否有可能以某種方式處理帶有類的對象的屬性？我有這樣的代碼：

var s = Snap('#map'); 

var seat = s.rect(0,0,6,6); 

seat.attr({ 
    fill:'#ccc', 
    stroke:'#000', 
    strokeWidth:1 
}); 

seat.node.onclick = function(){ 
    seat.attr("fill","red"); 
}; 

我想要做的就是有座是一類，這樣我就可以把新的（刪除）具有相同的屬性，但只是與其他座標席位。我還希望onclick方法能夠在整個班上工作，但只會影響該班級中點擊的座位。

我想這是可能的，但我被困想這件事。

如果我可以將代碼與jQuery來得到它的工作（如需要外部JavaScript）混合，這將是一個最好soulution。

Answer 1

你不能真的把一個點擊處理程序放在類上，但是你可以把所有的元素放在一個組中（用一個處理程序），並給它們一個唯一的ID。您可以通過svg或帶有svg屬性的中央JavaScript對象來設置座位的樣式。舉個簡單的例子，我的意思是，這裏是一個測試的例子...

你真的不需要任何jQuery在這種情況下。

// You can use css, or style direct via attributes, or a combination. 
.seat { 
    fill: blue; 
    opacity: 0.5; 
} 

.seathighlight { 
    fill: red; 
    opacity: 1; 
} 

s = Snap(400, 620); 

var seatGroup = s.g().click(seatClick); 
for(a=0; a<10; a++) { 
    seatGroup.append(s.rect(15*a,10,10,10).attr({ id: 'seat'+a, class: 'seat' })); 
}; 

function seatClick(e) { 
    var el = Snap(e.target); 
    el.attr({ class: 'seathighlight' }); 
    alert(el.attr('id')); 
} 

jsfiddle