javascript - jQuery - Raphael - SVG - 基于自定义数据的选择器

Question

我已将自定义数据属性分配给添加到 Raphael 画布的一些圆圈，如下所示each()：

marker.data('transaction', transaction);

如何在画布上找到具有相同交易数据值的元素？

目前我有代码：

var found = document.querySelectorAll("[transaction='" + current_transaction +"']");

它应该返回一个带有元素的 NodeList，但它不起作用。要将数据检索到变量中，就像一样简单var foo = marker.data('transaction')，但显然，如果我想检索元素的 NodeList，这不起作用。

因此，我希望我的选择器如下所示，但我无法找出正确的语法：

var found = document.querySelectorAll("data('transaction' = 1)");

任何帮助将非常感激

score 5 · Accepted Answer

由于 Raphael 必须支持 VML，因此它不会像 html5 应用程序那样将数据保存在 DOM 中。如果要将数据存储在 dom 中，则必须访问 html 节点并在那里设置属性...

marker.node.setAttribute('data-transaction', transaction);

然后您可以使用查询元素querySelectorAll。请记住，这将在 < IE8 上失败。

如果您想保留旧的 IE 支持，我建议您编写一个函数来迭代您的标记并返回 Raphael 对象mark.data("transaction") == transaction

score 2 · Accepted Answer

我认为问题在于 jQuery 无法访问 SVG 节点。你必须尝试普通的 Javascript。如果您使用querySelectorAll.

看这里：http ://dean.edwards.name/jsb/behavior/querySelectorAll.html 和这里：http ://www.w3.org/TR/selectors-api/#queryselectorall

2 回答 2