Snap.svg，我该如何处理类似对象的组？ （喜欢上课）

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），那将是一个更好的选择。

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