jQuery が SVG 要素にクラスを確実に追加しないのはなぜですか?

jQuery SVG: クラス変更の制限

jQuery を使用して SVG 要素のクラスを操作しようとすると、問題が発生する可能性があります。問題を調べてみましょう。

提供されたコードでは、.addClass() を使用して「クリックされた」クラスを SVG 四角形に追加しようとしています。ただし、このメソッドは、jQuery の根本的な制限により正しく機能しない可能性があります。

JQuery 3 より前のバージョンには、SVG 要素を操作するときに既知の問題があります。具体的には、SVG 要素に対してクラスを確実に追加または削除することができません。これは、jQuery が主に基礎となる HTML DOM を操作し、SVG 要素が異なる内部表現を持つためです。

回避策:

この制限を克服するには、次の方法を使用できます。回避策:

• jQuery にアップグレードする3: jQuery のバージョン 3 では、SVG クラス操作の問題に対処しています。可能であれば、このバージョンに更新して問題を解決してください。
• バニラ JavaScript を使用する: 最新のブラウザでは、要素の classList プロパティに直接アクセスして変更できます。例:

const element = document.getElementById("p5");
element.classList.add("clicked");

• jQuery の .attr() を使用します: .attr() を使用してクラス属性を操作できます。ただし、これにより、個々のクラスを追加または削除するだけでなく、クラス リスト全体が変更されることに注意してください。

$("#p5").attr("class", "jimmy clicked");

これらの回避策を実装することで、SVG 要素に対してクラスを効果的に追加および削除できるようになります。 jQuery またはバニラ JavaScript を使用します。

以上がjQuery が SVG 要素にクラスを確実に追加しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。