Discussion :

[Mousshaker]

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 :

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

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 :

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

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 html :

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

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&eacute;chain&eacute;s | </span>
	<span class="CursPoint" id="nalSA3">Lanc&eacute; fracassant | </span>
	<span class="grise">&Agrave; d&eacute;finir | </span>
	<span class="grise">&Agrave; d&eacute;finir</span>
</div>
<div name="infoAn1naldhien">
	<p class="radiusInfo info" id="HnalSA1">Attaque &agrave; &eacute;p&eacute;e : les rangs Naldhien chargent les rangs ennemis &eacute;p&eacute;e &agrave; 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>

[danielhagnoul]

Choisir un nom de "class" pour les actions.

Exemple : "action".

Code :

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

1
2
3
4
5
6
7
8
9
10
$( ".action" ).hover(
    function(){ // mouseenter
        $( "#H" + this.id ).stop( true ).show( 300 );
        $( this ).css( "color", "#ffffff" );
    },
    function(){ // mouseleave
        $("#H" + this.id ).stop( true ).hide( 300 );
        $( this ).css( "color", "#d1ba88" );
    }
);

[Mousshaker]

Parfait !
Je savais bien qu'il y avait un moyen tout simple ^^
Merci beaucoup !