[jquery]selection des noeuds suivant

Version imprimable

Bonjour a tous depuis un petit moment j'essaie de creer une serie de
question apparaissant au fur et à mesure suivant la réponse.
En faites, il y a une question principal avec comme ID "ParentsQuest"
qui suivant la reponse laisse apparaitre "ChildQuest" qui lui même
laisse apparaitre "SecondChildQuest"
Jusque la vous me suivez ?
Seule probléme chaque hierarchie posséde les même ID et je doit
laissez apparaitre ou non les éléments suivant ....

Le JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery('div#ParentsQuest :radio.quantity').click(function(){
 
                               if(jQuery(this).val() <= 0 || jQuery(':radio.quantity').val() == null){
 
                                       jQuery('#ChildQuest:hidden').show("slow");
 
                               }
 
                       })
                       jQuery('div#ChildQuest span[price] :radio.quantity').click(function(){
 
                                               if(jQuery(this).val() <=0){
 
                                                       jQuery('#SecondChildQuest:hidden').show("slow");
 
                                               }
                       });

LE HTML :

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
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
72
73
74
75
76
77
<div id="ParentsQuest">
       <label>
         Le site est-il déjà en ligne ?
       </label>
       <span price="750">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
      <div id="ChildQuest">
       <label>
         existe-t-il une version test en ligne ?
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
 
       </span>
     </div>
      <div id="SecondChildQuest">
       <label>
         Avez-vous une notion du nombre de page prévue ?
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
<div id="ParentsQuest">
       <label>
         test1
       </label>
       <span price="750">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
      <div id="ChildQuest">
       <label>
         test2
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
 
       </span>
     </div>

Seule problème la 1er série de question fonctionne mais une fois
arrivée a la deuxieme rien ne se passe ????
Je m'y prend certainement pas correctement pour sélectionner les
noeuds, car je vais avoir une bonne serie de question a mettre en
place.

09/09/2008, 12h10
Bovino

Citation:

Seule probléme chaque hierarchie posséde les même ID

C'est effectivement un problème vu qu'un id est sensé être unique dans la page !

Oui effectivement j'ai effectuer ce changement mais j'ai tous qui se déroule hors je veux l'elements suivant.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery('div.ParentsQuest :radio.quantity').click(function(){
 
				if(jQuery(this).val() <= 0 || jQuery(':radio.quantity').val() == null){
 
					jQuery('.ChildQuest').show("slow");
 
				}
 
			})
			jQuery('div.ChildQuest span[price] :radio.quantity').click(function(){
 
						if(jQuery(this).val() <=0){
 
							jQuery('.SecondChildQuest').show("slow");
 
						}
			});

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
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
72
73
74
75
76
77
<div class="ParentsQuest">
       <label>
         Le site est-il déjà en ligne ?
       </label>
       <span price="750">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
      <div class="ChildQuest">
       <label>
         existe-t-il une version test en ligne ?
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
 
       </span>
     </div>
      <div class="SecondChildQuest">
       <label>
         Avez-vous une notion du nombre de page prévue ?
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
<div class="ParentsQuest">
       <label>
         test1
       </label>
       <span price="750">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
       </span>
     </div>
      <div class="ChildQuest">
       <label>
         test2
       </label>
       <span price="0">
           <input type="radio" name="Offline.quantity" value="1"
class="quantity" />
           oui
           <input type="radio" name="Offline.quantity" value="0"
class="quantity" />
           non
 
         €<span class="total"></span>
 
       </span>
     </div>

Apres modification j'aimerai savoir comment faire apparaitre
uniquement la question qui a comme class
.ChildQuest_1 si je clique sur ParentsQuest_1 et ainsi de suite ..
j'ai realiser un petit script pour faire cela mais je le trouve pas
très pratique.
Il faudrai avoir un truc du style si je clique sur .ParentsQuest+num
je fais apparaitre .ChildQuest du même groupe (même numéro)

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
27
28
29
30
31
32
33
34
35
36
jQuery('.ChildQuest_1').hide();
                       jQuery('.SecondChildQuest_1').hide();
                       jQuery('.ChildQuest_2').hide();
                       jQuery('.SecondChildQuest_2').hide();
                       jQuery('div.ParentsQuest_1 :radio.quantity').click(function(){
 
                               if(jQuery(this).val() <= 0 || jQuery(':radio.quantity').val() == null){
 
                                       jQuery('.ChildQuest_1').show("slow");
 
                               }
 
                       })
                       jQuery('div.ChildQuest_1 span[price] :radio.quantity').click(function(){
 
                                               if(jQuery(this).val() <=0){
 
                                                       jQuery('.SecondChildQuest_1').show("slow");
                                               }
                       });
                       jQuery('div.ParentsQuest_2 :radio.quantity').click(function(){
 
                               if(jQuery(this).val() <= 0 || jQuery(':radio.quantity').val() == null){
 
                                       jQuery('.ChildQuest_2').show("slow");
 
                               }
 
                       })
                       jQuery('div.ChildQuest_2 span[price] :radio.quantity').click(function(){
 
                                               if(jQuery(this).val() <=0){
 
                                                       jQuery('.SecondChildQuest_2').show("slow");
                                               }
                       });

j'ai essayer également d'iterer ParentsQuest auto avec une fonction mais sans succés :cry:

Code:

1
2
3
jQuery('div.ParentsQuest').each(function(i){
				   this.Class = this.Class + "_" + i;
				 });