Raphael JS:如何在IE中的对象上使用jQuery选择器?
我正在尝试使用Raphael JS,但jQuery选择器似乎与IE8中的Raphael JS不兼容。
在Chrome和Firefox中,这可以:
var paper = ScaleRaphael("test", 500, 500); var c = paper.circle(50, 50, 40); c.node.setAttribute('class','bluecircle'); $('.bluecircle').attr({fill: 'blue'});
但在Internet Explorer(使用VML而不是SVG的IE8)中没有显示任何内容。
基本上我要做的是给每个对象一个类,所以我可以使用Jquery选择器一次操作具有某个类的所有对象……
有没有人知道如何做到这一点,这也适用于IE?
这与使用类来处理一组对象并不完全相同,但是我写了一个针对Raphael的补丁来允许命名集。 只需使用paper.set('uniqueID', element1, element2, ...)
调用即可。 元素包含一个groups数组,其中包含已分配给它们的每个组,而顶部的Raphael纸质对象具有一个由“uniqueID”键入的组字典。
以下测试代码显示了如何将hover处理程序应用于命名集,并使用hover回调在hover时将该组的所有成员变为黑色:
var marker1 = paper.circle(50, 20, 10).attr({'fill' : '#ff0000'}); var marker2 = paper.circle(100, 20, 10).attr({'fill' : '#ff0000'}); var marker3 = paper.circle(150, 20, 10).attr({'fill' : '#ff0000'}); var marker4 = paper.circle(200, 20, 10).attr({'fill' : '#ff0000'}); var s = paper.set('setID', marker1, marker2); s.push(marker3, marker4); s.pop(); // If marker 1, 2, or 3 is hovered, act on whole group s.hover(function() { for (var i = 0, ii = this.groups.length; i < ii; ++i) { var set = this.paper.groups[this.groups[i]]; for (var j = 0, jj = set.items.length; j < jj; ++j) { set.items[j].attr({'fill' : '#000000'}); } } });
我试试
c.node.className = 'bluecircle';