Fonction personnalisée Jquery
Bonjour à tous !
Me voilà de nouveau ici pour un peu d'aide
Voilà, en fait, j'ai une page où j'ai des noms d'actions, répartis en niveau et en groupes.
A chaque fois qu'on survol un nom d'action, je veux faire afficher une info bulle qui décrit l'action.
Jusque là pas trop de problème je sais faire.
Code:
1
2
3
4
5
6
7
8
9
10
| $(document).ready(function(){
$(".info").hide();
$("#nalSA1").mouseover(function(){ // quand tu survol l'id nalSA1
$("#HnalSA1").stop(true).show(300); //Affiche l'id HnalSA1
$("#nalSA1").css("color","#ffffff");
});
$("#nalSA1").mouseout(function(){// quand tu quittes
$("#HnalSA1").stop(true).hide(300);// cache
$("#nalSA1").css("color","#d1ba88");
}); |
Comme vous aurez pu le remarquez, j'ai mis juste 1 exemple, correspondant à une seule action.
Mon soucis c'est que je me dis que parti comme ça, ca voudra dire qu'il faudra que j'écrive autant de fois ce petit code que j'ai d'actions...
Chaque action ayant sa propre ID (me permettant de déclencher la fonction) et chaque description d'action ayant aussi son ID (me permettant de cibler ce qu'il faut déclencher)
mes ID d'action se composent comme ça : nal= 3 premières lettres du groupe concerné / S= sort / A= attaque / 1= numéro de l'action
mes ID de descriptif d'action : H=hide / le reste reprend l'ID d'action
N'y aurait-il donc pas un moyen d'écrire une fonction générale une seule fois, qui ferait le travail de façon "incrémentée"
du genre :
Code:
1
2
3
4
| $("#NomGrp+SA+NuméroAction").mouseover(function(){
$("#H+NomGrp+SA+NuméroAction").stop(true).show(300);
$("#NomGrp+SA+NuméroAction").css("color","#ffffff");
}); |
De façon à n'écrire qu'une seule fois la fonction et jQuery remplacerai NomGrp et NuméroAction en fonction de l'action survolée ?
Pour ça, il irait chercher NomGrp dans l'attribut name et le NuméroAction dans l'attribut ID, j'imagine
PS : mes noms d'action se trouvent dans des balises <span> et mes descriptions d'actions dans des balises <p>
Comme suit :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="sorts" id="niveau" name="niv1">
<h4>Niveau 1</h4>
<span class="CursPoint" id="nalSA1">Frappe lourde | </span>
<span class="CursPoint" id="nalSA2">Coups déchainés | </span>
<span class="CursPoint" id="nalSA3">Lancé fracassant | </span>
<span class="grise">À définir | </span>
<span class="grise">À définir</span>
</div>
<div name="infoAn1naldhien">
<p class="radiusInfo info" id="HnalSA1">Attaque à épée : les rangs Naldhien chargent les rangs ennemis épée à la main.</p>
<p class="radiusInfo info" id="HnalSA2">Infos du sort 2</p>
<p class="radiusInfo info" id="HnalSA3">Infos du sort 3</p>
<p class="radiusInfo info" id="HnalSA4">Infos du sort 4</p>
<p class="radiusInfo info" id="HnalSA5">Infos du sort 5</p>
</div> |
