jQuery-SVG-Klassenmanipulation: Warum schlagen „addClass()' und „removeClass()' fehl?

jQuery SVG: Warum kann ich keine Klassen manipulieren?

Bei der Arbeit mit jQuery zum Bearbeiten von SVG-Elementen kann es beim Hinzufügen oder Entfernen von Klassen zu Schwierigkeiten kommen. Dies ist kein Syntaxfehler, sondern rührt von Einschränkungen innerhalb von jQuery her.

jQuery-Einschränkungen

jQuery-Versionen vor 3 weisen bekannte Einschränkungen bei der Interaktion mit SVG-Elementen auf. Insbesondere funktionieren die Methoden .addClass() und .removeClass() möglicherweise nicht wie vorgesehen.

Problemumgehung mit .attr()

Eine Problemumgehung innerhalb von jQuery ist die Verwendung der Methode .attr() :

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

// Removing a class
$("#item").attr("class", "oldclass");

Vanilla-JavaScript-Alternative

Für eine Nicht-jQuery-Lösung können Sie die verwenden Methoden element.classList.add() und element.classList.remove():

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

// Removing a class
element.setAttribute("class", "oldclass");

Das obige ist der detaillierte Inhalt vonjQuery-SVG-Klassenmanipulation: Warum schlagen „addClass()' und „removeClass()' fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!