首页 >web前端 >js教程 >为什么 jQuery addClass() 不能处理 SVG 元素,如何修复它?

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

DDD
DDD原创
2024-12-04 20:25:16216浏览

Why Doesn't jQuery addClass() Work with SVG Elements, and How Can I Fix It?

jQuery SVG:解决 addClass() 困境

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

理解问题

提供的 SVG 代码:

<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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn