11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Jquery factorisation ????

Bonjour à tous,

Voilà j'ai un code Jquery qui se répète 3 fois car il doit masquer/changer 3 images différentes.
J'ai fait fonctionner mon code avec QUE des id !

 $("#imageentete1" ).mouseenter(
	function() {
    $('#imagesurvol1').css({display:'block'});
  });
$('#imagesurvol1').mouseout(
	function() {
	$('#imagesurvol1').css({display:'none'});
 });

 $("#imageentete2" ).mouseenter(
	function() {
    $('#imagesurvol2').css({display:'block'});
  });
$('#imagesurvol2').mouseout(
	function() {
	$('#imagesurvol2').css({display:'none'});
 });

 $("#imageentete3" ).mouseenter(
	function() {
    $('#imagesurvol3').css({display:'block'});
  });
$('#imagesurvol3').mouseout(
	function() {
	$('#imagesurvol3').css({display:'none'});
 });


Je pense que je peux réduire ce code en utilisant la synthax suivante mais ça ne marche pas snif !
(c'est juste pour la 1ere ligne si ça marche là j'imagine que ça doit fonctionner sur les autres loool)

 $("#imageentete1, #imageentete2, #imageentete3" ).mouseenter(
	function() {
    $(this).find('.imagesurvol').css({display:'block'});
  });

En résumé je dis sur la 1ere ligne #imageentete1 OU #imageentete2 OU #imageentete3 quand on y fait rentrer la souris tu appliques le CSS de CE .imagesurvol que j'ai donc passé en class au lieu de id.

Ca ne marche pas la console ne me dit pas d'erreur mais me renvoie un résultat vide et l'image ne change pas.

Merci de votre aide.
Modifié par Soxy95 (27 Jan 2016 - 16:42)
Il faudrait avoir le code html aussi mais a la place du 'find' je verrais bien un next (ou un prev )
 $(this).next('.imagesurvol').css({display:'block'});
Bon j'vais aller voir du côté de ce next Smiley lol

EN attendant voici le HTML

<div id="headerbottom">
			<div>
				<div id="imagesurvol1"></div>
				<img id="imageentete1" src="images/imageentete12.png">
			</div>
			<div>
				<div id="imagesurvol2"></div>
				<img id="imageentete2" src="images/imageentete22.png">
			</div>
			<div>
				<div id="imagesurvol3"></div>
				<img id="imageentete3" src="images/imageentete32.png">
			</div>
			<div class="stop"></div>
		</div>
Olivier C a écrit :
Bonjour,

Je ne comprends pas bien l'utilisation de jQuery dans ce cas. Vous pouvez très bien faire cette manip' en css.


J'ai pas choisi ça car

- Il faut que les 2 images soit superposées car il y a une légère transparence sur celle qui vient dessus
- Ce sont en fait des img de cercle dans une div il faut que le pointer redevienne normale entre chaque cercle (même si c'est le premier point qui m'a fait choisir JQuery Smiley lol )
Administrateur
Bonjour,

Vu que la relation entre élément survolé et élément sur lequel agir est qu'ils sont frères, c'est bien .next() pour passer de l'un à l'autre. Petit récap' des fonctions pour parcourir (traversing) le DOM (et y sélectionner un ou des éléments) : https://learn.jquery.com/using-jquery-core/traversing/ (in english)
Modifié par Felipe (27 Jan 2016 - 20:54)
Bon alors par acquis de conscience j'ai essayé ça marche pas avec le CSS

Comme les deux elts sont l'un sur l'autre ça clignote, un peu comme en JS quand tu rentres et sors par le même élt avec mouseenter et mouseout

Allé hop on retour sur next Smiley smile
Modifié par Soxy95 (27 Jan 2016 - 21:02)
Personnellement je ne comprends pas non plus la démarche JQuery.
Ton HTML peut se résumer à:

<div id="headerbottom">
	<div>
		<div></div>
		<img src="images/imageentete12.png">
	</div>
	<div>
		<div></div>
		<img src="images/imageentete22.png">
	</div>
	<div>
		<div></div>
		<img src="images/imageentete32.png">
	</div>
	<div class="stop"></div>
</div>

et ton css devient :

#headerbottom>div:hover img {display: block;}

Où est le problème ?
Soxy95 a écrit :
- Il faut que les 2 images soit superposées car il y a une légère transparence sur celle qui vient dessus
- Ce sont en fait des img de cercle dans une div il faut que le pointer redevienne normale entre chaque cercle (même si c'est le premier point qui m'a fait choisir JQuery Smiley lol )

Un dernier test : CodePen.

... Et puis j'arrête là, car visiblement il y a un truc que je ne saisis pas dans l'énoncé...
Sujet clos
Aller à