Modifier class span

Résolu/Fermé

samy - Modifié par samy le 26/11/2015 à 11:01
samy - 26 nov. 2015 à 11:42

Bonjour,
Je cherche à modifier la class d'un de mes span.
J'ai une liste contenant plusieurs span et je cherche à modifier la class d'un élément de ma liste quand je clique dessus.

<ul class="messagesList" id="list">
 <li id="454"><span class="from"><span id="454" class="glyphicons star"></span>
 <li id="453"><span class="from"><span id="453" class="glyphicons star"></span>
 <li id="452"><span class="from"><span id="452" class="glyphicons star"></span>
 <li id="451"><span class="from"><span id="451" class="glyphicons star"></span>
</ul>

J'aimerais modifier glyphicons star par glyphicons dislikes, j'ai essayé ça mais ça ne marche pas correctement

$('#list').on('click', 'li', function() {
                var id = $(this).attr('id');
                $('#' + id).toggleClass('glyphicons dislikes');
});

A voir également:

4 réponses

Réponse 1 / 4

Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 550
26 nov. 2015 à 11:34

Bonjour,

Vous n'agissez pas sur le bon élément.

- Premièrement fermez correctement vos balises <span> et <li>.
- Ensuite il faut donc que la fonction soit déclarer dans une méthode onload (document ready avec jQuery).

Voici le code :

$( document ).ready(function() {
          // On cible le span 
	  $('#list li .glyphicons').click(function() {
                // Retire la class "star"
		$(this).toggleClass( "star" );
                // Ajoute la classe "dislikes"
		$(this).toggleClass( "dislikes" );
	 }); 
});

Réponse 2 / 4

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
26 nov. 2015 à 11:12

Bonjour,

Et que donne ceci :

$('#list').on('click', 'li', function() {
      var id = $(this).attr('id');
      $("#"+id).toggleClass('glyphicons star');
      $("#"+id).toggleClass('glyphicons dislikes');  
});

samy
26 nov. 2015 à 11:30

ça ne change rien, par contre $("#"+id).toggleClass('glyphicons dislikes'); seul m'affiche bien l'icône que je veux cependant l'ancien n'est pas remplacé

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > samy
26 nov. 2015 à 11:36

Au pire , fais un REMOVE ADD

Par exemple :

var classToRemove;
var classToAdd ;
if( $('#'+id).hasClass('glyphicons star')){
  classToRemove = 'glyphicons star';
  classToAdd    = 'glyphicons dislikes';
}else{
  classToRemove = 'glyphicons dislikes';
  classToAdd    = 'glyphicons star';
}
 $("#"+id).removeClass(classToRemove);
 $("#"+id).toggleClass(classToAdd);

Réponse 3 / 4

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 26/11/2015 à 11:35

Salut,

Plusieurs remarques :
- le code html n'est pas correct, les balises span .from et li ne sont pas fermées
- dans le code javascript, il faut cibler le span qui possède la classe .glyphicons, pour l'instant tu cible la balise li
- sauf erreur de ma part, les classes glyphicons doivent être écrites sous la forme "glyphicons glyphicons-star"

Soit :

<ul class="messagesList" id="list">
 <li id="454"><span class="from"><span id="454" class="glyphicons glyphicons-star"></span></span></li>
 <li id="453"><span class="from"><span id="453" class="glyphicons glyphicons-star"></span></span></li>
 <li id="452"><span class="from"><span id="452" class="glyphicons glyphicons-star"></span></span></li>
 <li id="451"><span class="from"><span id="451" class="glyphicons glyphicons-star"></span></span></li>
</ul>

$('#list').on('click', 'li', function() {
    var span = $('.glyphicons', this); // on cible la balise avec la classe .glyphicons dans la balise li cliquée (this)
    span.toggleClass('glyphicons-star');
    span.toggleClass('glyphicons-dislikes');
});

Bonne journée

Réponse 4 / 4

samy
26 nov. 2015 à 11:42

Merci à vous tous pour votre aide, mon problème est résolu

Discussions similaires

Nvcontainers

Discussions similaires

Newsletters