Alterner une classe sur onclick

Version imprimable

Bonjour,

Je cherche à alterner une class CSS à chaque clique sur un bouton via onclick,
Code:

1 2 3 4 5 6 7 8 9 function alterneClass(id, class_default, class_change) { if ($('#'+id).attr('class'))==class_default) { $('#'+id).removeClass(class_change).addClass(class_change); } else if ($('#'+id).attr('class'))==class_change) { $('#'+id).removeClass(class_default).addClass(class_change); } }
pas très sûr de m'y prendre de la bonne façon...

merci d'avance pour vos conseils,

09/12/2017, 11h46
danielhagnoul

:salut:

Voir : http://api.jquery.com/toggleclass/
09/12/2017, 15h35
NoSmoking

Bonjour,
d'une manière générale, il serait temps que dominos prenne le soin de lire attentivement la documentation jQuery riche en méthodes et exemples ;)

Finalement j'ai adapté la syntaxe de la manière suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 function changeCSS(id, id_click, class_default, class_change) { collection = document.querySelectorAll("[id^='"+id+"']"); co = collection.length; for (i = 0; i < co; i++) { $(collection[i]).removeClass(class_change).addClass(class_default); } $('#'+id_click).click(function(){ $('#'+id_click).removeClass(class_default).addClass(class_change); }); }
toggleClass() ne correspond pas dans le cas présent car je souhaite qu'une fois cliqué se soit les autres div qui retournent à la classe par défaut. j'ai fini par comprendre mon erreur tout seul.

Citation:

Envoyé par NoSmoking

Bonjour,
d'une manière générale, il serait temps que dominos prenne le soin de lire attentivement la documentation jQuery riche en méthodes et exemples ;)

Merci pour le conseil.

Dans une div conteneur se trouve d'autres div, dans la fonction précédente j'alterne une classe à chaque clique sur l'une d'elle.
mais un clic effectué hors des ces div, c'est à dire dans la div du conteneur ou body ou html...
toutes les 3 div de l'exemple ci-dessous devraient retourner à la classe par défaut...

Le soucis est que lors du clique sur l'une de ces 3 div il semble se confondre avec la div conteneur du coup plus rien fonctionne.

Petit exemple simplifié du problème...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.conteneur {
border: 1px solid green; 
width: 500px; 
height: 500px;
}
.class-default {
background: silver; 
height: 100px;
margin:5px;
}
.class-change {
background: gray; 
width: 400px; 
height: 100px;
margin:5px;
}
</style>

Code:

1
2
3
4
5
6
 
<div id="toto" class="conteneur" onclick="retourClassDefault('madiv', 'class-change','class-default');">
<div id="madiv1" onclick="changeClass('madiv','madiv1', 'class-default','class-change');" class="class-default"></div>
<div id="madiv2" onclick="changeClass('madiv','madiv2', 'class-default','class-change');" class="class-default">du texte</div>
<div id="madiv3" onclick="changeClass('madiv','madiv3', 'class-default','class-change');" class="class-default">du texte</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function changeClass(id, id_click, class_default, class_change) 
{ 
	collection = document.querySelectorAll("[id^='"+id+"']");
	co = collection.length;
	for (i = 0; i < co; i++) {
		$(collection[i]).removeClass(class_change).addClass(class_default);
	}
	$('#'+id_click).click(function(){
		$('#'+id_click).removeClass(class_default).addClass(class_change);
	});
}
 
function retourClassDefault(id, class_change, class_default) 
{ 
	collection = document.querySelectorAll("[id^='"+id+"']");
	co = collection.length;
	for (i = 0; i < co; i++) {
		//$('#conteneur').click(function(){
			$(collection[i]).removeClass(class_change).addClass(class_default);
		//});
	}
}
</script>

Désolé, je n'ai rien trouvé dans la doc :weird:

11/12/2017, 08h11
SpaceFrog

Code:

document.querySelectorAll("[id^='"+id+"']");

a quoi servent les sélecteurs jquery ?
11/12/2017, 18h28
dominos

Dans ce mode fonctionnement, les div ont un id incrémenté, la collection permet de les identifier par leurs noms communs,
exemple madiv1, madiv2, madiv3

Pour appeler la fonction, l'incrémentation n'est plus nécessaire => changeCSS('madiv'...

Bonjour,

Quelle usine à gaz...

En utilisant correctement jQuery, ça prend moins de 10 lignes... (... commentaires et indentation compris !)

Je t'aide pour le HTML (qu'on pourrait encore simplifier, mais bon) :
Code:

1 2 3 4 5 <div class="conteneur"> <div class="class-default">du texte 1</div> <div class="class-default">du texte 2</div> <div class="class-default">du texte 3</div> </div>
Quant à ton problème essentiel, il se règle grâce à : event.stopPropagation()

Citation:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event

Description: Empêche l'événement de "buller" (= remonter) dans l'arborescence DOM, empêchant les gestionnaires parents d'être informés de l'événement

Bon. Vu que j'ai écrit le code... :
Code:

1 2 3 4 5 6 7 8 9 10 // si on clique dessus $('.conteneur > div').on('click', function(event){ event.stopPropagation(); // empêche de remonter le DOM (le clic ne s'applique PAS au parent) $('.conteneur > div').not(this).toggleClass('class-change',false).toggleClass('class-default',true); $(this).toggleClass('class-change class-default'); }); // si on clique en dehors $(':not(.conteneur > div)').on('click', function(){ $('.conteneur > div').toggleClass('class-change',false).toggleClass('class-default',true); });
10 lignes.

12/12/2017, 18h53
dominos

Vous avez mangé du chien ce matin ? Quelle agressivité de bon matin !! Pour votre gouverne, je débute à peine avec ajax/jquery... Et votre code, il fonctionne pas !

(1 ligne)

:mrgreen:
12/12/2017, 19h03
Invité

Tant pis. (2 mots :aie: )