对于SVG元素,jQuery .hasClass()方法失败

Question

我有一组带有类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而失败？

Answer 1

HTML元素的class属性在SVG中的含义不同.

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

要么

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

对于SVG元素.

编辑 .hasClass似乎工作得很好(至少在IE9和FF中)http://jsfiddle.net/X6BPX/1/

所以问题可能是以下任意组合:语法错误,使用过时的浏览器,使用过时的jQuery版本.

Answer 2

正如Bergi在评论中指出的那样,由于className返回一个SVGAnimatedString对象而不是正常,jQuery默默地在SVG元素上失败DOMString.

请参阅此JSFiddle以进行比较.

我很想提交一个pull请求,但做了一个快速的项目搜索,显然jQuery项目对SVG问题的立场是wontfix:https://github.com/jquery/jquery/pull/1511

如果你正在使用D3,你可以使用d3.select(this).classed('node').请注意,D3正确返回HTML元素和SVG元素.