javascript - jQuery-Raphael-SVG-カスタムデータに基づくセレクター

Question

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)");

どんな助けでも大歓迎です

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。

考えられる解決策：Raphael-Docをご覧ください：http：//raphaeljs.com/reference.html#Element.data

2 に答える 2