Simplification d'un code - variable

Bonjour,
j'ai un code javascript qui me donne satisfaction et fonctionne;
cependant il est je trouve très lourd et pas très éléguant, je suis convaincu que l'on pourrais faire mieux, aussi je viens écrire ici afin de voir si comme je le pense on peux utiliser des variables avec jquery.

Voici mon code:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<script type="text/javascript"> $('#1-portrait').mouseover(function(){ $('#1-nick').addClass( 'photosurvol'); }); $('#1-portrait').mouseout(function(){ $(#'1-nick').removeClass( 'photosurvol'); }); $('#1-nick').mouseover(function(){ $('#1-portrait').css( 'display','block'); }); $('#1-nick').mouseout(function(){ $('#1-portrait').css( 'display','none'); }); </script>

---

le fait est que j'ai une multitude d'élement id='xxx-nick' et id='xxx-portrait' (dans cet exemple j'ai mis xxx=1)
Je génère donc de façon automatique pour chaque valeur de xxx, mon petit bout de code javascript, ce qui finis par faire long vu que j'ai une soixantaine de résultat pour cette valeur.

N'y a t'il pas moyen de dire en jquery qu'il y a une partie du code qui est une variable ? (dans le cas présent un chiffre de 1 à 3 chiffre variable au sein du nom de l'id)

Merci.
Cordialement,
Casp.

En effet, il faut user et abuser des sélecteurs :ccool:

- Pour récupérer toutes les div dont l'attribut id termine par "-portrait" : $("div[id$=-portrait]")
- Pour gérer les événements et récupérer XXX-nick (si tant est que cette dernière se situe à l'intérieur de l'autre). Puis on utilise la fonction qui permet d'activer ou désactiver la class de l'élément : toogleClass. Bien sûr, on imagine que l'élément n'a pas encore la classe au chargement :

Code:

---

1 2 3

$("div[id$=-portrait]").on('mouseover mouseout', function(evt) { $(evt.currentTarget).find("div[id$=-nick]").toggleClass('photosurvol'); });

---

A noter que tu y gagnerais en simplicité si tu nommais différemment le XXX-nick. Nomme le, par exemple, XXX-portrait-nick. Ainsi le code serait :

Code:

---

1 2 3

$("div[id$=-portrait]").on('mouseover mouseout', function(evt) { $('#' + $(evt.currentTarget).id + '-nick').toggleClass('photosurvol'); });

---

Bonjour

Petite correction :

Code:

---

1 2 3

$("div[id$=-portrait]").on('mouseover mouseout', function(evt) { $('#' + evt.currentTarget.id + '-nick').toggleClass('photosurvol'); });

---

En effet, merci :ccool:

Super, merci de m'aider à progresser.
Je vais de ce pas appliquer tout ceci.

Cordialement,
Casp.

Est ce que vous êtes sûr de vous ?
Car j'ai essayé mais sans succès.
Pourtant je comprend la logique, elle paraît bonne, mais cela ne donne pas de résultats :/

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$( "[id$='-portrait']" ).hover( function(){ $( this ).addClass( "photosurvol" ); }, function(){ $( this ).removeClass( "photosurvol" ); } };   $( "[id$='-nick']" ).hover( function(){ $( this ).css( "display", "block" ); }, function(){ $( this ).css( "display", "none" ); } };

---