Discussion :

[mino26tz]

bonjour,
je suis un débutant en javascript.
je veux changer une image de flesch lors du click sur un div.

Code :

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

1
2
3
4
5
6
7
8
9
<div class="famille_1">
		<h2>FAMILLE DE PRODUITS N°1</h2>
		<img src="<?php echo $this->_img_path; ?>/flesh_f1_close.jpg"/>
	</div>
		<div class="famille_contenu_1 famille_contenu">
		        <div class="famille_illustr">
			<img src="<?php echo $this->_img_path; ?>/famille_illustr.jpg"/>
		        </div>
               </div>

la balise image en rouge c'est elle que je veux la changer en cliquant sur famille_1.

Code javascript

Code :

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

1
2
3
4
5
6
7
8
$('div.famille_1').click(function() {
 
      	$(this).siblings('.famille_contenu_1').slideToggle('800')
      	.siblings('.famille_contenu:visible').slideUp('800');
		$('img').attr({ src: "templates/defaut/images/flesh_f1_open.jpg" });
 
 
        });

dés que je clique sur famille_1 tous les images de la page changent en flesh_f1_open.

Merci d'avance.

[marcha]

Salut,

ton selecteur $('img') cible toutes les images de la page.

utilise un contexte, en écrivant $('img', this), ainsi il cible
les img dans le div.

si tu veux changer que la première, $('img', this).eq(0)

[andry.aime]

Bonjour,
Avec $('img', this) chaque image cliqué ne serait-il pas modifié par le même image flesh_f1_open.jpg?
Je pense que donner un id pour l'image cible du click serait plus précise.

[marcha]

Salut,

ajouter des ID n'est pas forcement nécessaire, regarde la doc des sélecteur
ici
tu devrais t'en sortir avec ça

[andry.aime]

Oui, mais cela ne cible pas tous les images cliqués du $('div.famille_1')?

[marcha]

Oui, c'est pour ça que je t'ai proposé d'utiliser eq(0) pour réduire la sélection
à la première image

[mino26tz]

Merci Marcha.
j'ai utilisé $('img', this).eq(0).attr({ src: "templates/defaut/images/flesh_f1_open.jpg" }); et y'a que la première image qui change.

Mais moi je veux qu' elle change en plus je veux que toutes les autres images de div.famille_2 , 3, 4 et 5 en flesh_f "n°"_close.jpg

et sur une deuxième clicks (ca veut dire lorsqu'on cache le produit) l'image revient à flesh_f1_close.jpg.

Merci d'avance.

[mino26tz]

c'est bon j'ai réussi ouaiiiie!!!!

en faite je doit changer tous les flesh en fermante de tous les autre dic.
exemple:

Code :

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

1
2
3
4
5
$('img', this).eq(0).attr({ src: "templates/defaut/images/flesh_f1_open.jpg" });
		$('img', 'div.famille_2').eq(0).attr({ src: "templates/defaut/images/flesh_f2_close.jpg" });
		$('img', 'div.famille_3').eq(0).attr({ src: "templates/defaut/images/flesh_f3_close.jpg" });
		$('img', 'div.famille_4').eq(0).attr({ src: "templates/defaut/images/flesh_f4_close.jpg" });
		$('img', 'div.famille_5').eq(0).attr({ src: "templates/defaut/images/flesh_f5_close.jpg" });

Merci pour vous, c'est bien de resoudre un truc comme ça.

thnk you.

[marcha]

Salut,

tu peux le faire en une opération avec le bon sélecteur.

mais tu utilise les class comme des ID, c'est pas très judicieux.

imagine que tes images fleche aient une class='fleche'

tu peux modifier ton code ainsi:

Code :

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

1
2
$('img.fleche').attr({ src: "templates/defaut/images/flesh_f2_close.jpg" });
$('img.fleche', this).attr({ src: "templates/defaut/images/flesh_f1_open.jpg" });

[mino26tz]

salut,

merci marcha pour ta formidable explication, mais lorsque j'utilise la derniere explication tous les flesh qui ont une classe flesh change en flesh_f1_open.jpg.

Bref je préconise ce que j'ai fait au débu car ça marche ..

Mais le problème maintenant est que lorsque je reclick sur la meme famille il faut que la flesh changer en fermé.

1 click ouvre
2 click ferme

[marcha]

Tu peux mémoriser des choses dans les éléments avec data

[mino26tz]

merci c'est trés interressant.
mais je crois pas que je serais capable d'utiliser la fonction data facilement.
Un exemple svp, car les exemples dans la doc ne sont pas trés claire.

[marcha]

qu'est-ce qui n'est pas clair ?

[mino26tz]

je veux dire est ce que vous pouvez m'expliquez sur un exemple de mon code, comme ça je comprendrai mieux et en l'appliquannt sur les différentes div j'apprendrai à utiliser cette fonction.

Merci beaucoup.

Ps: je suis pas anglophone.

[marcha]

Par exemple pour fixer une information sur les éléments d'une sélection:

Code :

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

$('img', this).eq(0).data('etat', true);

et pour la relire

Code :

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

var etat = $('img', this).eq(0).data('etat');

[mino26tz]

merci pour vos explications.
C'est trés gentil.