ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery が SVG オブジェクトにクラスを追加または削除しないのはなぜですか?それを修正するにはどうすればよいですか?

jQuery が SVG オブジェクトにクラスを追加または削除しないのはなぜですか?それを修正するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-28 06:44:131036ブラウズ

Why Doesn't jQuery Add or Remove Classes from SVG Objects, and How Can I Fix It?

jQuery SVG: オブジェクトへのクラスの追加または削除

jQuery SVG を使用する場合、SVG オブジェクトへのクラスの追加または削除で問題が発生する場合があります。よくある間違いとその解決策を次に示します。

問題:

SVG オブジェクトにクラスを追加しようとしていますが、変更が表示されません。 SVG および jQuery の機能は、クリック時のアラートのトリガーなど、他の操作では期待どおりに機能します。

コード例:

<rect>

解決策:

jQuery バージョン 3 より前のバージョンでは、クラスを追加または削除する際に既知の問題が存在します。 SVG 要素はサポートされていません。これを解決するには、次のアプローチの使用を検討してください。

  • jQuery 3: jQuery バージョン 3 以降に更新すると、この問題が修正されます。
  • バニラ JavaScript: 代わりに、最新のバージョンでサポートされている classList.add() メソッドまたは classList.remove() メソッドを使用してください。ブラウザ:
document.getElementById("p5").classList.add("clicked");
  • jQuery with attr(): jQuery を使い続けたい場合は、別のアプローチとして .attr() メソッドを使用します。
$("#p5").attr("class", "jimmy clicked");

これらの解決策はクラスの変更にのみ影響することに注意してください。イベント処理などの他の jQuery と SVG 要素の対話は、意図したとおりに機能するはずです。

以上がjQuery が SVG オブジェクトにクラスを追加または削除しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。