Système de notation

**Royade** · 18/12/2012, 09h08

Bonjour,

Etant une bille en javascript et n'ayant pas trop le temps pour l'instant d'apprendre ce language je viens vous faire part de mon problème si jamais il y a un expert en js qui peut prendre un peu de son temp pour m'aiguiller!

J'ai recupéré un systeme de notation allant de 1 a 5 étoiles de couleur grise et quand le curseur passe sur une étoile ou qu' on en selectionne une, elle devient jaune ainsi que toutes les étoiles precedentes.Si la personne à déja mis une note, il peut la modifier, mon problème: j'aimerais que la note qu'il ai donné soit visible au niveau des étoiles, je m'explique si l'utilisateur a mis une note de 3 j'aimerais que les 3 premières étoiles sois déja en jaune:
j'ai essayé avec checked='checked', ca fonctionne mais le problème c'est qu'il faut survoler les étoiles avec le curseur avant pour voir l'étoiles/la note sélectionnée,si quelqu'un a une idée a me suggérer, je suis preneur, ou déja me dire si c'est possible ou pas!

Je vous mets mon code:

le formulaire:

Code html :

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
25
<form action="" method="post">
 <ul class="notes-echelle">
   <li>
    <label for="note01" title="Note: 1 sur 5">1</label>
    <input type="radio" name="notesA" id="note01" value="1" />
   </li>
   <li>
    <label for="note02" title="Note: 2 sur 5">2</label>
    <input type="radio" name="notesA" id="note02" value="2" />
   </li>
   <li>
    <label for="note03" title="Note: 3 sur 5">3</label>
    <input type="radio" name="notesA" id="note03" value="3"  checked='checked' />
   </li>
   <li>
    <label for="note04" title="Note: 4 sur 5">4</label>
    <input type="radio" name="notesA" id="note04" value="4"/>
   </li>
   <li>
    <label for="note05" title="Note: 5 sur 5">5</label>
    <input type="radio" name="notesA" id="note05" value="5" />
   </li>
 </ul>									
 <input class="bouton_envoyer" type="submit" name="Envoyer_note" value="envoyer" />
</form>

Le code js:

Code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// Lorsque le DOM est chargé on applique le Javascript
$(document).ready(function() 
{
	// On ajoute la classe "js" à la liste pour mettre en place par la suite du code CSS uniquement dans le cas où le Javascript est activé
	$("ul.notes-echelle").addClass("js");
	// On passe chaque note à l'état grisé par défaut
	$("ul.notes-echelle li").addClass("note-off");
	// Au survol de chaque note à la souris
	$("ul.notes-echelle li").mouseover(function() {
		// On passe les notes supérieures à l'état inactif (par défaut)
		$(this).nextAll("li").addClass("note-off");
		// On passe les notes inférieures à l'état actif
		$(this).prevAll("li").removeClass("note-off");
		// On passe la note survolée à l'état actif (par défaut)
		$(this).removeClass("note-off");
	});
	// Lorsque l'on sort du sytème de notation à la souris
	$("ul.notes-echelle").mouseout(function() {
		// On passe toutes les notes à l'état inactif
		$(this).children("li").addClass("note-off");
		// On simule (trigger) un mouseover sur la note cochée s'il y a lieu
		$(this).find("li input:checked").parent("li").trigger("mouseover");
	});
});
 
$("ul.notes-echelle input")
	// Lorsque le focus est sur un bouton radio
	.focus(function() {
		// On passe les notes supérieures à l'état inactif (par défaut)
		$(this).parent("li").nextAll("li").addClass("note-off");
		// On passe les notes inférieures à l'état actif
		$(this).parent("li").prevAll("li").removeClass("note-off");
		// On passe la note du focus à l'état actif (par défaut)
		$(this).parent("li").removeClass("note-off");
	})
	// Lorsque l'on sort du sytème de notation au clavier
	.blur(function() {
		// Si il n'y a pas de case cochée
		if($(this).parents("ul.notes-echelle").find("li input:checked").length == 0) {
			// On passe toutes les notes à l'état inactif
			$(this).parents("ul.notes-echelle").find("li").addClass("note-off");
		}
	});
 
$("ul.notes-echelle input")
	// Lorsque le focus est sur un bouton radio
	.focus(function() {
		// On supprime les classes de focus
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
		// On applique la classe de focus sur l'item tabulé
		$(this).parent("li").addClass("note-focus");
		// [...] cf. code précédent
	})
	// Lorsque l'on sort du sytème de notation au clavier
	.blur(function() {
		// On supprime les classes de focus
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-focus");
		// [...] cf. code précédent
	})
	// Lorsque la note est cochée
	.click(function() {
		// On supprime les classes de note cochée
		$(this).parents("ul.notes-echelle").find("li").removeClass("note-checked");
		// On applique la classe de note cochée sur l'item choisi
		$(this).parent("li").addClass("note-checked");
	});
 
// On simule un survol souris des boutons cochés par défaut
$("ul.notes-echelle input:checked").parent("li").trigger("mouseover");
// On simule un click souris des boutons cochés
$("ul.notes-echelle input:checked").trigger("click");