22

nodeクラスとを持つ SVG 要素のセットがありますlink。私のプログラムは、SVG要素のいずれかにカーソルを合わせると、要素にnodeクラスまたはクラスがあるかどうかを検出する必要があります。linkただし、何らかの理由で、.hasClass()動作しないようです。

$(".node").hover(function(evt){
    console.log($(this).attr("class")); //returns "node"
    console.log($(this).hasClass('node')); //returns false
}, function(){console.log("Done");});

したがって、私がホバリングした要素にはクラスnodeがあり、jQueryはそれも検出しますconsole.log($(this).attr("class"));が、何らかの理由で実際に.hasClass()失敗します。どうしてこれなの？SVGが原因で失敗していますか?

4

5 に答える 5

11

HTML 要素の class 属性は、SVG では同じ意味を持ちません。

$("<b></b>").addClass($(this).attr("class")).hasClass("node")

または

/(^|\s)node(\s|$)/.test($(this).attr("class"))

SVG 要素用。

EDIT .hasClass は問題なく動作するようです (少なくとも IE9 と FF では) http://jsfiddle.net/X6BPX/1/

したがって、問題は次のいずれかの組み合わせである可能性があります: 構文エラー、古いブラウザーの使用、古いバージョンの jQuery の使用。

于 2013-07-24T17:41:37.463 に答える
7

Bergi がコメントで指摘したように、通常の の代わりにオブジェクトをclassName返すため、jQuery は SVG 要素で暗黙のうちに失敗します。SVGAnimatedStringDOMString

比較については、この JSFiddleを参照してください。

これについてプルリクエストを送信したくなりましたが、簡単なプロジェクト検索を行ったところ、どうやら SVG の問題に関する jQuery プロジェクトのスタンスは修正されていないようです: https://github.com/jquery/jquery/pull/1511

を使用している場合はD3、 を使用できますd3.select(this).classed('node')。D3 は HTML 要素と SVG 要素の両方を正しく返すことに注意してください。

于 2014-07-15T14:45:27.877 に答える
4

これはこれまでで最速のオプションではありませんが、可能な解決策です。jQuery を使用する代わりに、属性を文字列としてhasClass取得し、それを使用して検索することができます。これが失敗するユースケースがおそらくあるので、非常に単純なプロジェクトを除いて、これはお勧めしません。classindexOf

作業例:

var s = $(this).attr('class');
if( s.indexOf('node')!==-1 ){
    // do something
}

覚えておいてください:ではなく、何も見つからない場合にindexOf戻ります。部分文字列が index で始まる場合に返されます。-1000

于 2015-09-24T21:01:15.900 に答える
1

これは、jquery 3.xx バージョンより前の addClass、removeClass、hasClass jquery メソッドのハックです。

$.fn.extend({
    addSVGClass: function (cls) {
        return this.each(function () {
            var classList = $(this).attr('class');
            if (classList) {
                var classListArr = classList.split(" ");
                if (classListArr.indexOf(cls) === -1) {
                    classListArr.push(cls);
                    classList = classListArr.join(" ").trim();
                    $(this).attr('class', classList);
                }
            } else {
                $(this).attr('class', cls);
            }
        });
    },
    removeSVGClass: function (cls) {
        return this.each(function () {
            var classList = $(this).attr('class');
            if (classList) {
                var classListArr = classList.split(" ");
                if (classListArr.indexOf(cls) !== -1) {
                    delete classListArr[classListArr.indexOf(cls)];
                    classList = classListArr.join(" ").trim();
                    $(this).attr('class', classList);
                }
            }

        });
    },
    hasSVGClass: function (cls) {
        var el = this[0];
        var classList = $(el).attr('class');
        if (classList) {
            var classListArr = classList.split(" ");
            if (classListArr.indexOf(cls) !== -1) {
                return true;

            } else {
                return false;
            }
        }
        return false;
    }
});

利用方法 ：

$('.svg-element').addSVGClass('selected');
于 2017-10-13T02:48:50.827 に答える