为什么 jQuery addClass() 不能处理 SVG 元素，如何修复它？

jQuery SVG：解决 addClass() 困境

虽然 jQuery SVG 提供了一种与 SVG 元素交互的便捷方式，但用户在向 SVG 添加或删除类时可能会遇到困难对象。此问题源于 jQuery 无法处理版本 3 之前的 SVG 元素上的类属性。

理解问题

提供的 SVG 代码：

<rect></rect>

以及 jQuery code:

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

演示了 jQuery 无法添加SVG 矩形的“clicked”类。尽管能够在单击对象时触发警报，但添加或删除类失败。

解决方案

选项 1：升级到 jQuery 3 或更高版本

jQuery 3 在 SVG 处理功能方面引入了重大改进，包括操作类属性的能力。升级到 jQuery 3 或更高版本应该可以解决此问题。

选项 2：分别对 jQuery 或 Vanilla JS 使用 .attr() 或 setAttribute()

无需升级到 jQuery 3，您可以使用 jQuery 中的 .attr() 方法或 vanilla JavaScript 中的 setAttribute() 方法来修改 SVG类属性。

jQuery

$("#item").attr("class", "oldclass newclass"); // Add a class
$("#item").attr("class", "oldclass"); // Remove a class

Vanilla JavaScript

var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass"); // Add a class
element.setAttribute("class", "oldclass"); // Remove a class

通过使用这些替代方法，您可以即使没有升级到 jQuery，也可以在 jQuery 或 vanilla JavaScript 中成功地从 SVG 元素添加或删除类3.

以上是为什么 jQuery addClass() 不能处理 SVG 元素，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！