SVG 元素的 jQuery .hasClass() 方法失败

Question

我有一组带有 node 和 link 类的 SVG 元素。我的程序应该在悬停在任何 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 而失败？

Answer 1

这是针对之前 jquery 3.x.x 版本的 addClass、removeClass、hasClass jquery 方法的 hack。

$.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');

Answer 2

这不是有史以来最快的选择，但它是一个可能的解决方案。除了使用 jQuery 的 hasClass 之外，您还可以获取 class 属性作为字符串并使用 indexOf 搜索它。这可能会在某些用例中失败，因此我不建议这样做，除非是超级简单的项目。

工作示例：

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

记住：indexOf 在找不到任何东西时返回-1，而不是0。当子字符串从索引0 开始时返回0。

Answer 3

正如 Bergi 在 cmets 中指出的那样，由于 className 返回一个 SVGAnimatedString 对象而不是普通的 DOMString 对象，jQuery 在 SVG 元素上静默失败。

请参阅this JSFiddle 进行比较。

我很想就此提交一个拉取请求，但做了一个快速的项目搜索，显然 jQuery 项目对 SVG 问题的立场是不会修复的：https://github.com/jquery/jquery/pull/1511

如果您使用的是D3，则可以使用d3.select(this).classed('node')。请注意，D3 正确返回 HTML 元素和 SVG 元素。

Answer 4

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 版本。

Answer 5

有效。但一定要关闭功能

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

http://jsfiddle.net/X6BPX/