Discussion :

[dominos]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

[danielhagnoul]

Voir : http://api.jquery.com/toggleclass/

[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

[dominos]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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.

[dominos]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JS+JQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

a quoi servent les sélecteurs jquery ?

[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'...

[Invité]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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()

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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)

[Invité]

Tant pis. (2 mots )