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 クラス操作のサポートが限定的であることにあります。この問題は、jQuery が HTML 要素とは異なる方法で SVG 要素を処理するという事実に起因します。

解決策

この問題に対処するためのいくつかの解決策が存在します。

• jQuery v3 を採用: jQuery v3 以降ではこの制限が解決され、クラスのシームレスな追加と削除が可能になりました。 .addClass() と .removeClass() を使用して SVG 要素から取得します。
• Adopt 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() を使用してバニラ JavaScript を利用する: または、バニラ 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 中国語 Web サイトの他の関連記事を参照してください。