Discussion :

[epeichette]

Bonjour,

Je débute en jquery et je voudrais ajouté sur une case à cochée un évennement onclic sur lequel je fais apparaitre ou disparaitre l'élément dd suivant.
par contre je ne peux pas mettre de id que ma case à cochée qui est générée automatiquement.
voila le code généré :

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
<dd>
      <ul id="options-13-list" class="options-list">
        <li><input class="checkbox product-custom-option"
  name="options[13][]"
 id="options_13_2" value="16" type="checkbox"><span
 class="label"><label for="options_13_2">cadeau <span
 class="price-notice">+<span class="price">10,00
&euro;</span></span></label></span></li>
      </ul>
    </dd>
 <dt><label>saisissez votre message</label>
    </dt>
    <dd class="last">
      <textarea id="options_3_text"
 onchange="opConfig.reloadPrice()"
 class="validate-length maximum-length-300 product-custom-option"
 name="options[3]" rows="5" cols="25"></textarea>
      <p class="note">Maximum number of characters: <strong>300</strong></p>
    </dd>

pour repérer ma case a coché, j'ai l'élément cadeau qui se trouve dans un label (en gras dans le texte)

merci de votre aide pour me dire comment je peux retrouver mes éléments

[SpaceFrog]

avec find() ?

[danielhagnoul]

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
	$(function(){
		/*
		 * je voudrais ajouté sur une case à cochée un évennement onclic
		 * sur lequel je fais apparaitre ou disparaitre l'élément dd suivant.
		 */
		$("#options_13_2").click(function(){
			$(this).parents("dd").nextAll("dd").eq(0).slideToggle(2000);
		});
	});
</script>

[epeichette]

Bonjour,

je ne peux pas me baser sur #options_13_2 car il est généré dynamiquement et change avec l'id du produit demandé. Je ne peux me base que sur le label "cadeau" que l'on trouve dans le code...

[danielhagnoul]

Bonsoir.

Et avec un seul code valable pour tous les inputs dont l'id commence par 'options_' ?

Code :

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

1
2
3
$("input[id^='options_']").click(function(){
	$(this).parents("dd").nextAll("dd").eq(0).slideToggle(2000);
});

[SpaceFrog]

J'avais cru comprendre que le mot cadeau était le repère ...
d'ou ma proposition de faire un find sur le html() ?

[danielhagnoul]

Bonjour.

Si on a la certitude que le mot « cadeau » n'est employé nulle part ailleurs, mais l'utilisation d'un id ou d'une classe est toujours préférable et plus rapide.

[devyan]

Bonjour,

Puisque les "options" sont générés dynamiquement, pourquoi ne pas directement leur affecter le "onclick" ?

Le code à exécuter dans l'événement reste similaire à celui proposé par danielhagnoul...


devyan

[epeichette]

Bonjour,

merci pour toutes vos réponses, il m'est impossible d'intervenir sur l'écriture du html, le seul code que je peux faire est du côté client.
Pour être sûr que cadeau ne soit pas utilisé ailleurs, j'ai choisi "!!cadeau!!" et c'est mon unique point de repère. Le formulaire s'écrit automatiquement à parti d'un back office

J'arrive a sélectionner la checkbox avec ce code :

Code :

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

1
2
 
	jQuery('li:has(label:contains(!!cadeau!!)) :checkbox').hide();

Par contre je n'arrive toujours pas a sélectionné le dd et dt suivant
j'ai essayé

Code :

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

1
2
3
4
	jQuery('li:has(label:contains(!!cadeau!!)) :checkbox').click(function(){	
             				$(this).parents("dd").nextAll("dd").eq(0).slideToggle(2000);
 
	             			});

mais ça ne marche pas.
Si quelqu'un peut m'aider...

[SpaceFrog]

Code :

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

label:contains('!!cadeau!!')

donc modification aussi en amont des "

Code :

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

  $("label:contains('!!cadeau!!')")

[epeichette]

ok effectivement, mais mon problème ne vient pas de là puisque je retrouve ma chexcbox, c'est trouver le dd et dt suivant qui me pose problème

[SpaceFrog]

eq() ou next() ?

[epeichette]

j'ai tenté avec

Code :

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

jQuery('dd > ul >li:has(label:contains(!!cadeau!!)').nextAll("dd").eq(0).hide();

mais ça ne marche pas et je ne sais pas pourquoi...

dd > ul> li:has(label:contains(!!cadeau!!)') me renvoie bien sur le dd parent de cadeau, mais je n'arrive toujours pas a sélectionner le dd et dt suivant, nextAll("dd").eq(0) ne marche pas et nextAll("dd") non plis