Wie kann ich mit jQuery Klassen zu SVG-Elementen hinzufügen und daraus entfernen?

jQuery SVG: Klassen hinzufügen und entfernen

Obwohl mit jQuery SVG interaktive Elemente erstellt werden, stoßen Benutzer manchmal auf Schwierigkeiten, wenn sie versuchen, Klassen zu manipulieren. Ein Problem, das auftritt, ist die Unfähigkeit, Klassen zu SVG-Objekten hinzuzufügen oder zu entfernen.

Problem:

jQuery-Selektoren und Ereignishandler funktionieren nahtlos mit SVG-Elementen und ermöglichen Aktionen wie z B. die Anzeige von Benachrichtigungen bei Klicks. Versuche, die addClass-Methode von jQuery zum Hinzufügen von Klassen zu denselben Elementen zu verwenden, erwiesen sich jedoch als erfolglos.

Lösung:

Das Hauptproblem liegt in der Unfähigkeit von jQuery, Klassen für direkt zu ändern SVG-Elemente vor Version 3. Diese Einschränkung erfordert alternative Ansätze zum Hinzufügen und Entfernen Klassen:

jQuery-abhängiger Ansatz:

Anstatt addClass und removeClass zu verwenden, nutzen Sie die attr()-Methode von jQuery, um das Klassenattribut zu manipulieren:

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

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

Reiner JavaScript-Ansatz:

Wenn Sie sich lieber nicht verlassen möchten In jQuery können Sie das Klassenattribut des Elements direkt mithilfe der setAttribute-Methode von JavaScript bearbeiten:

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

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

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