jQuery - Raphael - 基于自定义数据的SVG选择器 [英] jQuery - Raphael - SVG - selector based on custom data

问题描述

我已经在 each（）循环中为下面的Raphael画布添加了一些自定义数据属性：

  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））; 
  

任何帮助都将不胜感激

解决方案

因为Raphael必须支持VML，所以它并不像HTML5应用程序那样在DOM中保存数据。如果您想在dom中存储数据，您必须访问html节点并在其中设置属性...

  marker.node .setAttribute（'data-transaction'，transaction）; 
  

然后你可以用 querySelectorAll 。请记住，这将失败< IE8。

如果你想保留旧的IE支持，我建议你编写一个迭代你的标记的函数，并在标记时返回Raphael对象.data（transaction）== transaction

I have assigned a custom data attribute to some circles added to the Raphael canvas as follows in a each() loop:

marker.data('transaction', transaction);

How do I find elements on the canvas that have the same transaction data value?

Currently I have the code:

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

Which should return a NodeList with the elements, but it doesn't work. To retrieve the data into a variable, it is as simple as var foo = marker.data('transaction'), but obviously, this doesn't work if I want to retrieve a NodeList of the elements.

Therefore, I want my selector to be look as follows, but I cannot work out the correct syntax:

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

Any help would be much appreciated

解决方案

Being that Raphael must support VML, it doesn't keep data in the DOM as is normal with html5 applications. If you want to store data in the dom you must access the html node and set the attribute there...

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

Then you can then query the elements with querySelectorAll. Keep in mind this will fail on < IE8.

If you want to keep older IE support I'd recommend writing a function that iterates over your markers and returns the Raphael object when mark.data("transaction") == transaction

这篇关于jQuery - Raphael - 基于自定义数据的SVG选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！