jQuery SVG，为什么我不能添加类？

javascript jquery css svg jquery-svg

2022-08-30 00:06:56

我正在使用jQuery SVG。我无法在对象中添加或删除类。有人知道我的错误吗？

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

答案 1

编辑2016：阅读接下来的两个答案。

JQuery 3 修复了根本问题
Vanilla JS：适用于现代浏览器element.classList.add('newclass')

JQuery（小于 3）无法向 SVG 添加类。

.attr()与SVG一起使用，所以如果你想依赖jQuery：

// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

如果你不想依赖jQuery：

var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");

答案 2

DOM API 中有一个 element.classList，它同时适用于 HTML 和 SVG 元素。不需要jQuery SVG插件甚至jQuery。

$(".jimmy").click(function() {
    this.classList.add("clicked");
});