為什麼 jQuery addClass() 不能處理 SVG 元素，如何修復它？

jQuery SVG：解決addClass() 困境

雖然jQuery SVG 提供了一種與SVG 元素交互的便捷方式，但用戶在向SVG 添加或刪除類時可能會遇到困難對象。此問題源自於 jQuery 無法處理版本 3 之前的 SVG 元素上的類別屬性。

理解問題

提供的SVG 代碼：

<rect>

以及jQuery code:

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

演示了jQuery 無法添加SVG 矩形的「🎜>演示了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中文網其他相關文章！