Warum funktioniert jQuery addClass() nicht mit SVG-Elementen und wie kann ich das Problem beheben?

jQuery SVG: Lösung des addClass()-Dilemmas

Während jQuery SVG eine bequeme Möglichkeit zur Interaktion mit SVG-Elementen bietet, können Benutzer auf Schwierigkeiten beim Hinzufügen oder Entfernen von Klassen zu SVG stoßen Objekte. Dieses Problem ist auf die Unfähigkeit von jQuery zurückzuführen, Klassenattribute für SVG-Elemente vor Version 3 zu verarbeiten.

Das Problem verstehen

Der bereitgestellte SVG-Code:

<rect>

Und die jQuery Code:

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

demonstriert die Unfähigkeit von jQuery, die „angeklickte“ Klasse zum SVG-Rect hinzuzufügen. Obwohl beim Klicken auf das Objekt eine Warnung ausgelöst werden kann, schlägt das Hinzufügen oder Entfernen von Klassen fehl.

Lösung

Option 1: Upgrade auf jQuery 3 oder höher

jQuery 3 führte erhebliche Verbesserungen bei den SVG-Verarbeitungsfunktionen ein, einschließlich der Möglichkeit, Klassenattribute zu bearbeiten. Ein Upgrade auf jQuery 3 oder höher sollte dieses Problem beheben.

Option 2: Verwenden Sie .attr() oder setAttribute() für jQuery bzw. Vanilla JS

Ohne Upgrade Für jQuery 3 können Sie die Methode .attr() in jQuery oder die Methode setAttribute() in Vanilla JavaScript verwenden, um die SVG-Klasse zu ändern Attribute.

jQuery

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

Vanilla JavaScript

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

Mit diesen alternativen Ansätzen können Sie erfolgreich sein Fügen Sie Klassen zu SVG-Elementen in jQuery oder Vanilla JavaScript hinzu oder entfernen Sie sie, auch ohne ein Upgrade auf jQuery 3.

Das obige ist der detaillierte Inhalt vonWarum funktioniert jQuery addClass() nicht mit SVG-Elementen und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!