Je trouve this récalcitrant

Version imprimable

Je n'ai pas vraiment compris pourquoi, mais JQuery n'est pas si simple qu'il n'y parait à utiliser :

ce code ne marche pas correctement :

Voici le script JS qui est dans la page HTML :
Code:

1 2 3 4 5 6 7 8 9 10 var tab_img=["imgPromo1","imgPromo2","imgPromo3","imgPromo4","imgPromo5","imgPromo6"]; jQuery.each(tab_img, function() { $('#'+this).mouseover(function(e){ affImgGrand(this,e.pageX,e.pageY) }); $('#'+this).mouseout(function(e){ cachImgGrand(this)}); });
C'est simple, il déclenche le lancement de addImgGrand contenu dans un fichier JS externe, sa fonction est d'afficher les images en grand contenue dans un <div> (de imgPromo1 à imgPromo6) :

<div id="imgPromo1" style="display:none"><img src="monimg.gif" class="truc"></div> (remarquez qu'au démarrage il est cachée par style="display:none").

Quant à cachImgGrand() il fait disparaitre notre <div>, quelque chose m'a échappé ?! "this" ne semble pas être sous la bonne forme en arrivant dans la fonction, car je récupère un objet (testé avec alert() )!

Mes 2 fonctions externes :
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 function affImgGrand(eltId,x,y) { eltId=eltId+"-Gde"; $("#"+eltId).css("left",20+x+"px"); $("#"+eltId).css("top",20+y+"px"); $("#"+eltId).show(); } function cachImgGrand(eltId) { eltId=eltId+"-Gde"; $("#"+eltId).hide(); }

Bonsoir

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
<script>
	/*
	 * C'est le comportement normal, pour
	 * le comprendre je vous conseille d'utiliser
	 * Firebug et console.log()
	 */
	function affImgGrand(elt, x, y){
		console.log(elt, elt.id);
 
		$("#"+ elt.id + "-Gde").css({
			"left": 20+x+"px",
			"top": 20+y+"px"
		}).show();
	}
 
	function cachImgGrand(elt){
		//console.log(elt, elt.id);
 
		$("#"+ elt.id + "-Gde").hide();
	}
 
	$(function(){
		var tab_img = ["imgPromo1", "imgPromo2"];
 
		$.each(tab_img, function(i, item){
			// ici je vous conseille item et non this
			// voir la doc sur $.each()
			console.log(item);
 
			$('#'+item).mouseenter(function(e){
				// ici this est égal à $('#'+item)[0]
				console.log(this);
 
				affImgGrand(this, e.pageX, e.pageY);
			});
 
			$('#'+item).mouseleave(function(){
				// ici this est égal à $('#'+item)[0]					
				console.log(this);
 
				cachImgGrand(this);
			});
		});
	});
</script>

10/09/2010, 11h36
youtch

Ce n'était pas évident de le deviner, en consultant la doc d'API je n'arrivais pas à trouver la solution... Merci pour l'éclairage pertinent !