Discussion :

[audrey1912]

Bonjour,

Mon problème est le suivant. J'ai l'affichage d'un bout de page html que je fais via du JQuery dans une fonction Javascript. Un truc du style :

Code :

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

jQuery('body').append('</br>........<img src="images/right-arrow.png" title="Next Program" onMouseOver="this.src=\'images/right-arrow-selected.png\'" onMouseOut="this.src=\'images/right-arrow.png\'" onclick="javascript:prgNext(urlchannel, i);this.style.display=\'none\'"/>...');

Et la, quand il accède a la fonction quand je clic sur l'image, il me dit qu'il ne connait pas le paramètre d'entrée i.

Quelqu'un a une idee? Merci d'avance.

[NoSmoking]

Bonjour,
il semblerait que cela soit le cas classique de la closure et en plus dans ton cas il sort d'où le i?

ps: pas de chez top ton code!

[audrey1912]

Bonjour,

En fait le i est une variable que j'incrémente dans une autre boucle.
Il n'y a donc aucun moyen de faire passer de valeur en paramètres dans l'appel de ma fonction ?

ps: pas de chez top ton code!

Comment pourrais-je l'améliorer dans ce cas...

[NoSmoking]

Il n'y a donc aucun moyen de faire passer de valeur en paramètres dans l'appel de ma fonction ?

plusieurs milliers, non j'exagère

Une des façons va te venir immédiatement si l'on rend ton code plus "clean", en utilisant les méthodes .attr(), .on() et autre .data().

le code ci dessous reprend une façon de faire.

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
20
21
22
23
24
25
26
var oImg;
  // création de l'image
  oImg = $('<img>')
    // affecte l'adresse de l'image
    .attr('src', 'http://www.developpez.com/template/kit/kitinfo.png')
    // affecte le titre
    .attr('title', 'Next Program')
    // affecte fonction à l'entrée sur image
    .on('mouseenter', function(){
      // sauve l'adresse de l'image dans data->oldImage
      $(this).data('oldImage', $(this).attr('src'));
      // modifie l'adresse de la nouvelle image
      $(this).attr('src', 'http://www.developpez.com/template/kit/kitwarning.png');
    })
    // affecte fonction au sortir de l'image
    .on('mouseleave', function(){
      // recup et affecte l'adresse de l'ancienne image stockée dans data->oldImage
      $(this).attr('src', $(this).data('oldImage'));
    })
    // affecte fonction au clic
    .on('click', function(){
      // masque l'image
      $(this).css('display', 'none');
    });
  // ajout au body
  $('body').append( oImg);

Je te laisse te familliariser avec ce code et les commentaires associés.

Je pense que maintenant tu vois que l'on peut titrer avantage de la méthode .data() pour stocker des données utiles.

La mise dans une boucle ne devrait pas te poser de soucis.

[audrey1912]

Oui, en effet c'est beaucoup plus propre.
J'avoue que je fais du jquery que depuis quelques semaines, et je viens d'apprendre beaucoup de choses avec ce tu m'as répondu.

Je te remercie beaucoup!

[danielhagnoul]

Pour compléter votre découverte du jQuery voici une autre méthode pour faire la même chose.

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
$( "<img/>", {
	"src" : "http://www.developpez.com/template/kit/kitinfo.png",
	"title" : "Next Program",
	"mouseenter" : function(){
		var jObj = $( this );
 
		jObj
			.data( "oldImage", jObj.attr( "src" ) )
			.attr( "src", "http://www.developpez.com/template/kit/kitwarning.png" );
    },
	"mouseleave" : function(){
		var jObj = $( this );
 
		jObj.attr( "src", jObj.data( "oldImage") );
    },
	"click": function(){
		$( this ).hide();
    }
}).appendTo( "body" );

Comment puis-je créer un nouvel élément du DOM ?