Pourquoi jQuery addClass() ne fonctionne-t-il pas avec les éléments SVG et comment puis-je y remédier ?

jQuery SVG : résoudre le dilemme addClass()

Bien que jQuery SVG offre un moyen pratique d'interagir avec les éléments SVG, les utilisateurs peuvent rencontrer des difficultés pour ajouter ou supprimer des classes dans SVG objets. Ce problème provient de l'incapacité de jQuery à gérer les attributs de classe sur les éléments SVG antérieurs à la version 3.

Comprendre le problème

Le code SVG fourni :

<rect>

Et le jQuery code:

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

démontre l'incapacité de jQuery à ajouter la classe "cliquée" au rect SVG. Bien qu'il soit possible de déclencher une alerte lorsque l'on clique sur l'objet, l'ajout ou la suppression de classes échoue.

Solution

Option 1 : mise à niveau vers jQuery 3 ou supérieur

jQuery 3 a introduit des améliorations significatives dans ses capacités de gestion SVG, y compris la possibilité de manipuler les attributs de classe. La mise à niveau vers jQuery 3 ou version ultérieure devrait résoudre ce problème.

Option 2 : utilisez .attr() ou setAttribute() pour jQuery ou Vanilla JS, respectivement

Sans mise à niveau vers jQuery 3, vous pouvez utiliser la méthode .attr() dans jQuery ou la méthode setAttribute() dans Vanilla JavaScript pour modifier la classe SVG attributs.

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

En utilisant ces approches alternatives, vous pouvez réussir ajoutez ou supprimez des classes d'éléments SVG dans jQuery ou JavaScript Vanilla, même sans mise à niveau vers jQuery 3.

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!