jQuery addClass() が SVG 要素で機能しないのはなぜですか?それを修正するにはどうすればよいですか?

jQuery SVG: addClass() のジレンマに対処する

jQuery SVG は SVG 要素を操作する便利な方法を提供しますが、ユーザーは SVG にクラスを追加または削除するときに困難に遭遇する可能性があります。オブジェクト。この問題は、jQuery がバージョン 3 より前の SVG 要素のクラス属性を処理できないことが原因です。

問題の理解

提供されている SVG コード:

<rect>

そして jQuery code:

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

は、jQuery が"clicked" クラスを SVG 四角形に追加します。オブジェクトをクリックするとアラートをトリガーできるにもかかわらず、クラスの追加または削除は失敗します。

解決策

オプション 1: jQuery 3 以降にアップグレードする

jQuery 3 では、クラス属性を操作する機能など、SVG 処理機能が大幅に改善されました。 jQuery 3 以降にアップグレードすると、この問題は解決されるはずです。

オプション 2: jQuery または Vanilla JS にそれぞれ .attr() または setAttribute() を使用します

アップグレードせずにjQuery 3 では、jQuery の .attr() メソッドを使用するか、 SVG クラス属性を変更するためのバニラ JavaScript の setAttribute() メソッド。

jQuery

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

バニラ JavaScript

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

これらの代替アプローチを使用すると、クラスを正常に追加または削除できます。 jQuery 3 にアップグレードしなくても、jQuery またはバニラ JavaScript の SVG 要素。

以上がjQuery addClass() が SVG 要素で機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。