Comment puis-je ajouter et supprimer des classes d'éléments SVG à l'aide de jQuery ?

jQuery SVG : ajout et suppression de classes

Malgré la création d'éléments interactifs avec jQuery SVG, les utilisateurs rencontrent parfois des difficultés lorsqu'ils tentent de manipuler des classes. Un problème qui se pose est l'impossibilité d'ajouter ou de supprimer des classes des objets SVG.

Problème :

Les sélecteurs et gestionnaires d'événements jQuery fonctionnent de manière transparente avec les éléments SVG, permettant des actions telles comme l'affichage d'alertes sur les clics. Cependant, les tentatives d'utilisation de la méthode addClass de jQuery pour ajouter des classes à ces mêmes éléments s'avèrent infructueuses.

Solution :

Le problème principal réside dans l'incapacité de jQuery à modifier directement les classes pour Éléments SVG antérieurs à la version 3. Cette limitation nécessite des approches alternatives pour ajouter et supprimer des classes :

jQuery-Dependent Approche :

Au lieu d'utiliser addClass et RemoveClass, utilisez la méthode attr() de jQuery pour manipuler l'attribut de classe :

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

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

Approche JavaScript pure :

Si vous préférez ne pas vous fier à jQuery, vous pouvez manipuler directement l'attribut de classe de l'élément à l'aide de setAttribute de JavaScript. méthode :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!