[Résolu]JQuery .hover et variables

Bonjour à tous !!

Pour le contexte, le code provient d'un slider que je suis en train de coder en javascript/jQuery.

Voici la boucle qui pose probleme :

for (j = 0; j<img.length; j++) { 


		$("#slideListe").append('<li><a href="#" id="slide' + (j+1) + '"></a></li>');//on ajoute le nombre de slide au controles
		var backgroundProperty = "url('banner_buttons.png')" + backgroundPosX + "px 0 rgba(0, 0, 0, 0)"; //
		$("#slide" + (j+1)).css("background", backgroundProperty);//on ajoute les image correspondante aux controles
	


		$("#slide" + (j+1)).hover(function() { //On créée l'evenement mouseover pour les numero de controle
			var backgroundPropertyHover = "url('banner_buttons.png')" + backgroundPosX + "px -24px rgba(0, 0, 0, 0)";
			$(this).css("background", backgroundPropertyHover);//alert(backgroundPropertyHover);
		},function(){
			var backgroundPropertyHover = "url('banner_buttons.png')" + backgroundPosX + "px 0px rgba(0, 0, 0, 0)";
			$(this).css("background", backgroundPropertyHover);//alert(backgroundPropertyHover);
		});

		backgroundPosX += -24;//on incremente la position du sprite pour afficher le prochain numero de slide
	}

La premiere partie avec le .append me permet d'ajouter a mon slider autant de selecteur qu'il y a d'image dans le slider.
Jusqu'ici, aucun probleme !

C'est pour la partie de la fonction .hover que j'ai un soucis, j'explique :
En utilisant la variable backgroundPosX, je pensais que mon code allait généré une propriété hover pour chaque $("#slide" + (j+1)) avec la valeur actuelle de backgroundPosX.

J'ai bien un hover généré sur chaque id, mais tous à la valeur de backgroundPosX, ce qui parait logique puisque une fois la page chargée le script a fini d'etre executé et la variable backgroundPosX est fixe.

Comment puis-je faire pour généré un .hover pour chacun de mes ID mais avec la valeur du backgroundPosX à chaque tour de boucle et pas à la valeur qu'il a lorsque je passe ma souris sur l'élément ?

J'espère avoir été clair, dites moi si vous voulez des images d'explications ou plus de codes



Merci d'avance pour votre aide !!
Modifié par SpiStache (25 Feb 2014 - 08:48)

Bonjour SpiStache,

Une solution rapide : intégrer la valeur spécifique backgroundPosX à chaque lien en renseignant un attribut de type data-xxx avec .attr().

...
var backgroundProperty = "url('banner_buttons.png') " + backgroundPosX + "px 0 rgba(0, 0, 0, 0)"; //
$("#slide" + (j+1)).css("background", backgroundProperty);//on ajoute les image correspondante aux controles

// attribution de la position x spécifique.
$("#slide" + (j+1)).attr('data-posx', j+1);
...

Vous récupèrerez cette valeur dans les fonctions anonymes du hover() ainsi :

...
// récupération de la position x.
var posx = $(this).attr('data-posx');

var backgroundPropertyHover = "url('banner_buttons.png') " + posx + "px -24px rgba(0, 0, 0, 0)";
$(this).css("background", backgroundPropertyHover);//alert(backgroundPropertyHover);
...

NB : Pour la variable backgroundPropertyHover , attention de bien mettre dans la chaîne de caractères un espace après url('banner_buttons.png').

Espérant que la solution vous convienne. Bon code...
Modifié par Guiwint (24 Feb 2014 - 17:45)

Merci Guiwint !

Je n'avais pas pensé du tout à utiliser l'attribut data !

Concernant l'espace dans ma variable, je sais pas comment je l'ai supprimer sans faire exprès mais c'est surement pour ça que j'ai un bug recent sur ie8 ^^

Merci beaucoup c'est parfait !