为什么 jQuery AddClass() 不适用于 SVG 元素，如何修复它？

jQuery SVG 类操作问题

在 jQuery SVG 操作领域，用户偶尔会遇到从 SVG 元素添加或删除类的困难。触发此问题的常见场景是使用 jQuery 定位 SVG 对象并尝试使用 .addClass() 方法。

提供的代码片段突出显示了该问题：

<rect class="jimmy"></rect>

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

虽然 jQuery 和 SVG 集成对于事件处理来说完美无缺，但类操作仍然不成功。

底层原因

根本原因在于 v3 之前的 jQuery 版本对 SVG 类操作的支持有限。此问题源于以下事实：与 HTML 元素相比，jQuery 处理 SVG 元素的方式不同。

解决方案

几种解决方案可以解决此问题：

• 拥抱 jQuery v3：jQuery v3 及以上版本已经解决了这个限制，可以无缝地添加和删除类使用 .addClass() 和 .removeClass() 的 SVG 元素。
• 采用 Vanilla JavaScript：现代浏览器为 SVG 元素中的类操作提供本机支持。利用 classList.add() 和 classList.remove() 方法提供了 jQuery 的可靠替代方案。
• 利用 jQuery 的 .attr() 方法：如果您更喜欢坚持使用 jQuery，请考虑利用 .attr() 方法修改类属性

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

// Remove class using .attr()
$("#item").attr("class", "oldclass");

• 使用 .setAttribute() 拥抱 Vanilla JavaScript：或者，您可以使用 vanilla JavaScript 来操作类属性。

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

// Remove class using .setAttribute()
element.setAttribute("class", "oldclass");

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