Raphael JS：如何在IE中的对象上使用jQuery选择器？

问题描述：

我正在尝试使用Raphael JS，但jQuery选择器似乎与IE8中的Raphael JS不兼容。

I'm trying to use Raphael JS, but jQuery selectors don't seem to work with Raphael JS in IE8.

在Chrome和Firefox中，这有效：

In Chrome and Firefox this works:

  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）中没有显示任何内容。

But in Internet Explorer (IE8, which uses VML instead of SVG) nothing is shown.

基本上我要做的是给每个对象一个类，所以我可以使用Jquery选择器一次操作具有某个类的所有对象。。

Basically what I'm trying to do is to give each object a class, so I can use Jquery selectors to manipulate all objects at once that have a certain class...

有没有人知道如何做到这一点，这也适用于IE？

Does anybody know a way how to do this, that also works in IE ?

答

这与使用类来处理一组对象并不完全相同，但我写了一个对拉斐尔的补丁允许命名集。只需使用 paper.set（'uniqueID'，element1，element2，...）调用。元素包含一个groups数组，其中包含已分配给它们的每个组，并且顶部Raphael纸质对象具有一个由'uniqueID'键入的组字典。

This is not exactly the same as using classes to address a group of objects, but I wrote a patch against Raphael to allow for named sets. Simply invoke with paper.set('uniqueID', element1, element2, ...). Elements contain a groups array with each group they've been assigned to, and the top Raphael paper object has a groups dictionary keyed by the 'uniqueID'.

以下测试代码显示了如何将悬停处理程序应用于命名集，并使用悬停回调在悬停时将该组的所有成员变为黑色：

The following test code shows how you can apply a hover handler to a named set, and use the hover callback to turn all the members of the group black on 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'});
    }
  }
});

Raphael JS：如何在IE中的对象上使用jQuery选择器？

相关推荐