Modifier class span
Résolu
samy
-
samy -
samy -
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.
J'aimerais modifier glyphicons star par glyphicons dislikes, j'ai essayé ça mais ça ne marche pas correctement
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:
- Modifier class span
- Modifier dns - Guide
- Modifier liste déroulante excel - Guide
- Modifier story facebook - Guide
- Modifier extension fichier - Guide
- Modifier sa voix en direct - Guide
4 réponses
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 :
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" );
});
});
Bonjour,
Et que donne ceci :
Et que donne ceci :
$('#list').on('click', 'li', function() {
var id = $(this).attr('id');
$("#"+id).toggleClass('glyphicons star');
$("#"+id).toggleClass('glyphicons dislikes');
});
Au pire , fais un REMOVE ADD
Par exemple :
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);
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 :
Bonne journée
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