Création de liste et CSS [Résolu]

[baggie]

Bonjour,

j'utilise jQuery pour créer quelques listes dans mon application que j'agrémente avec des CSS par la suite.

Cependant j'ai un problème.

Voici une de mes listes : la liste des mois d'une année. Pour chaque mois, j'affiche un résultat à côté du mois (une image).
J'ai également un tableau "correspondance" qui me retourne le mois en toute lettre quand je récupère le n° du mois.

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
25
26
 
$.ajax({
	url: 'mapage.php?annee='+annee,
	success: function(html) {
 
		myData = JSON.parse(html, function (key, value) {
 
		if(typeof value === 'string')
		{
			var splitdata = value.split('-');
			// Si on a aucun résultat pour ce mois
			if (splitdata[0] == 0)
				$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois">'+correspondance[key]+'</td></tr>');
			// Si on a des résultats
			else
			{
			// Si on a des résultats non terminés
				if (splitdata[1] != 0
					$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois"><img src="../Images/img1.png" /> '+correspondance[key]+'</td></tr>');
				else
					$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois"><img src="img2.png" /> '+correspondance[key]+'</td></tr>');
			}
	        }
		if (key == mois)
			$("#mois-"+key).addClass('moisencours').removeClass('mois');	
});

Et c'est donc en dernière partie du code, que si ma clé est égale au mois actuel (par exemple 12 en ce moment), alors j'ajouterai une classe.

Dans ma liste, je peux cliquer sur chaque mois pour afficher les résultats de chacun d'eux. Sauf qu'en mettant mon dernier "if" pour ajouter la classe, il m'est au final impossible de recliquer sur le mois actuel.

Par exemple, nous sommes en décembre. Au premier chargement de la page, le mois de décembre va se mettre en surbrillance. Quand je cliquerai sur un autre mois, c'est ce nouveau qui se mettra en surbrillance et plus le mois de Décembre. Sauf que je ne pourrai plus recliquer sur le mois de décembre. Il gardera toujours en mémoire le fait qu'il a eu cette classe, même si je l'enlève (avec un removeClass). Voir le code ci-dessous :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(".mois").click(function() {
 
	// On enlève la classe 'mois en cours' au mois actuel
	$(".moisencours").addClass('mois');
	$(".moisencours").removeClass('moisencours');
	// On récupère le mois sélectionné
	var selection = $(this).attr('id'); // nom-n°
	var spliter = selection.split('-'); // On sépare
	var mois = spliter[1]; // On récupère le n° du mois
 
	$("#mois-"+mois).addClass('moisencours');
	$("#mois-"+mois).removeClass('mois');
 
});

Et j'ai ce problème pour deux listes différentes. Donc si j'en règle un, je devrai réussir à régler l'autre.
Voila pourquoi je vous demande de l'aide !

[larffas68]

Salut,

je viens de tester ce que tu fais et j'ai une petite question :

ton $.ajax s’exécute quand exactement ? car la fonction de Click fonctionne bien correctement même en définissant de façon synthétique

Code :

1
2
var key=12;
$("#mois-"+key).addClass('moisencours').removeClass('mois');

Pourrais tu nous montrer la page ou se charge le tout ? comment cela est-il implémenter ?

L.

[baggie]

Merci pour ta réponse !
Cependant je ne peux pas montrer ma page, elle n'est pas en ligne.

Mon ajax se déclenche dans une fonction qui elle est appelée au chargement de la page.

Au niveau du code, je peux guère en donner plus parce que tout est quasiment là !

[larffas68]

essaye de désactiver ta fonction .ajax et de mettre par defaut un des mois avec la classe moisencours et test pour voir si le probleme vient de cette fonction ajax

[baggie]

Sauf que mon ajax crée lui même ma liste, je la charge depuis ce fichier :/ Donc si je le désactive ben je n'aurai plus rien !

Ma fonction Click fonctionne comme il faut, les classes passent bien sur le mois sélectionné quand il le faut.

C'est uniquement si je veux revenir sur le mois en cours que ça pose problème.

J'arrive pas à mieux expliquer Et niveau code je crois bien avoir donné ce qui correspondait au problème donc je ne vois pas quoi faire de plus :/

Si je mets ma fameuse ligne (if key == ...), alors ça ne fonctionnera pas pour revenir sur le mois actuel. Si je l'enlève, le mois actuel ne s'affichera pas en surbrillance mais je pourrai revenir dessus.

[larffas68]

Mais a quoi correspond le mois dans

Code :

if (key == mois)

?

[baggie]

Arf, en effet avec ça ça peut aider.

mois représente le mois actuel que je récupère avec un getMonth.
Donc si pendant mon parcours, key correspond au mois en cours (par exemple 12 en ce moment), alors on met la class à décembre (la value ici).

[larffas68]

pense bien que getMonth retourne une valeur comprise entre 0 et 11 avec

0 : janvier
1 : février
...
11 : décembre

[baggie]

Oui je l'ai bien pris en compte ! Je ne sais pas trop pourquoi ça ne fonctionne pas, rien à faire

[danielhagnoul]

Bonsoir

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

[baggie]

Merci !!! Ca marche parfaitement