為什麼 jQuery AddClass() 不適用於 SVG 元素，如何修復它？

jQuery SVG 類別操作問題

在 jQuery SVG 操作領域，使用者偶爾會遇到從 SVG 元素新增或移除類別的困難。觸發此問題的常見場景是使用 jQuery 定位 SVG 物件並嘗試使用 .addClass() 方法。

提供的程式碼片段突顯了這個問題：

<rect class="jimmy">

$(".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中文網其他相關文章！