jQuery SVG，为什么我不能添加类？
我正在使用jQuery SVG。我无法向对象添加或删除类。有人知道我的错误吗？
SVG：
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
不会添加该类的jQuery：
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
我知道SVG和jQuery可以很好地协作，因为我可以定位对象并在单击对象时发出警报：
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
第3067篇《jQuery SVG，为什么我不能添加类？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
我使用Snap.svg向SVG添加一个类。
var jimmy = Snap(" .jimmy ")
jimmy.addClass("exampleClass");
这是我相当优雅但有效的代码，它处理以下问题（没有任何依赖性）：
classList<svg>IE中不存在的元素className不代表IE中元素的class属性<svg>getAttribute()和setAttribute()实现classList尽可能使用它。
码：
var classNameContainsClass = function(fullClassName, className) {
return !!fullClassName &&
new RegExp("(?:^|\\s)" + className + "(?:\\s|$)").test(fullClassName);
};
var hasClass = function(el, className) {
if (el.nodeType !== 1) {
return false;
}
if (typeof el.classList == "object") {
return (el.nodeType == 1) && el.classList.contains(className);
} else {
var classNameSupported = (typeof el.className == "string");
var elClass = classNameSupported ? el.className : el.getAttribute("class");
return classNameContainsClass(elClass, className);
}
};
var addClass = function(el, className) {
if (el.nodeType !== 1) {
return;
}
if (typeof el.classList == "object") {
el.classList.add(className);
} else {
var classNameSupported = (typeof el.className == "string");
var elClass = classNameSupported ?
el.className : el.getAttribute("class");
if (elClass) {
if (!classNameContainsClass(elClass, className)) {
elClass += " " + className;
}
} else {
elClass = className;
}
if (classNameSupported) {
el.className = elClass;
} else {
el.setAttribute("class", elClass);
}
}
};
var removeClass = (function() {
function replacer(matched, whiteSpaceBefore, whiteSpaceAfter) {
return (whiteSpaceBefore && whiteSpaceAfter) ? " " : "";
}
return function(el, className) {
if (el.nodeType !== 1) {
return;
}
if (typeof el.classList == "object") {
el.classList.remove(className);
} else {
var classNameSupported = (typeof el.className == "string");
var elClass = classNameSupported ?
el.className : el.getAttribute("class");
elClass = elClass.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), replacer);
if (classNameSupported) {
el.className = elClass;
} else {
el.setAttribute("class", elClass);
}
}
}; //added semicolon here
})();
Example usage:
var el = document.getElementById("someId");
if (hasClass(el, "someClass")) {
removeClass(el, "someClass");
}
addClass(el, "someOtherClass");
在jQuery的2.2和1.12发布后包括以下报价：
尽管jQuery是HTML库，但我们同意对SVG元素的类支持可能会有用。现在，用户将能够调用.addClass（） ，.removeClass（） ，.toggleClass（） ，和.hasClass（） SVG的方法。jQuery现在更改了class属性，而不是className属性。这也使类方法可在常规XML文档中使用。请记住，SVG无法使用许多其他功能，如果您需要除类操作之外的任何功能，我们仍建议使用专用于SVG的库。
它测试：
如果单击该小方块，则它将更改其颜色，因为class已添加/删除了该属性。
$("#x").click(function() {
if ( $(this).hasClass("clicked") ) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});.clicked {
fill: red !important;
}<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>
<body>
<svg width="80" height="80">
<rect id="x" width="80" height="80" style="fill:rgb(0,0,255)" />
</svg>
</body>
</html>加载后，jquery.svg.js您必须加载以下文件：http://keith-wood.name/js/jquery.svgdom.js。
资料来源：http : //keith-wood.name/svg.html#dom
工作示例：http : //jsfiddle.net/74RbC/99/
DOM API中有element.classList可同时用于HTML和SVG元素。不需要jQuery SVG插件，甚至不需要jQuery。
$(".jimmy").click(function() {
this.classList.add("clicked");
});
相似问题
问题类别
受以上答案（尤其是Sagar Gala）的启发，我创建了此API。如果您不希望或无法升级jquery版本，可以使用它。