Warum kann ich mit jQuery keine Klassen zu SVG-Elementen hinzufügen?

jQuery SVG: Fehlerbehebung bei der Unfähigkeit, Klassen hinzuzufügen

Beim Arbeiten mit jQuery SVG können Probleme beim Hinzufügen oder Entfernen von Klassen aus SVG-Objekten auftreten. In diesem Artikel werden wir die Ursachen untersuchen und Lösungen anbieten.

Das Problem:

Beachten Sie den folgenden Code:

<rect>

Trotzdem Wenn beim Klicken auf das Objekt eine Warnung ausgelöst werden kann, schlägt das Hinzufügen der Klasse „angeklickt“ fehl.

Die Lösung:

Vor jQuery 3 war das Hinzufügen von Klassen zu SVG-Elementen problematisch. Dieses Problem wurde jedoch in jQuery 3 behoben. Darüber hinaus unterstützen moderne Browser die Vanilla-JavaScript-Methode classList.add('newclass') für SVG-Elemente.

Alternativer jQuery-Ansatz:

Wenn Sie lieber bei jQuery bleiben möchten, können Sie das Klassenattribut direkt mit manipulieren attr():

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

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

Vanilla-JavaScript-Ansatz:

Um jQuery-Abhängigkeit zu vermeiden, verwenden Sie den folgenden Vanilla-JavaScript-Code:

var element = document.getElementById("item");

// Add "newclass"
element.setAttribute("class", "oldclass newclass");

// Remove "newclass"
element.setAttribute("class", "oldclass");

Das obige ist der detaillierte Inhalt vonWarum kann ich mit jQuery keine Klassen zu SVG-Elementen hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!