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