JeuWeb (JeuPHP) - Crée ton jeu par navigateur - [Résolu][JavaScript & jquery] Affichage contenu DIV

Bonsoir,

Je pensai pouvoir me débrouiller seul avec mon bouquin et les différents forums, mais là je sèche. je fais du sur place depuis une 3 jours.

Voilà mon soucis, j'ai une carte générée automatiquement par une base mysql.
Chaque case est un terrain contenant des informations, notamment la capacité de celui-ci.
En cliquant sur le terrain, un div à coté apparaît avec sa capacité.
Mon bug, c'est que le div affiche la dernière capacité de dernier terrain quelque soit le terrain cliqué.
Je voudrais afficher les infos d'un terrain en cliquant dessus.

STYLES.CSS

Code PHP :

.infos_terrain {
    visibility: hidden;
    width: 200px;
    height: 400px;
    position: absolute;
    background-color: #fff6d0;
    border-style: double;
    margin-left: -220px;
} 

CODE JAVASCRIPT & JQUERY

Code PHP :

function getID(lien){
var separateur = lien.id.split(":");
var pompom = $('#ter_'+separateur[2]).text();
$('.infos_terrain').css("visibility", "visible");
alert("Capacité terrain --> " + pompom );
}; 

BASE TERRAINS

Code PHP :

CREATE TABLE `terrains` (
  `id` mediumint(1) unsigned NOT NULL auto_increment,
  `z_x` mediumint(1) unsigned default '0',
  `z_y` mediumint(1) unsigned default '0',
  `c_x` mediumint(1) unsigned default '0',
  `c_y` mediumint(1) unsigned default '0',
  `type` varchar(20) NOT NULL default '0',
  `capacite` bigint(1) unsigned default '0',
  `estimation` bigint(1) unsigned default '0',
  `base` enum('oui','non') default NULL,
  `id_joueur` int(11) unsigned default '0',
  `img_perso` varchar(50) default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4901 DEFAULT CHARSET=latin1; 

INDEX.PHP

Code PHP :

$requete = "SELECT * FROM terrains WHERE z_x='$zone_x' AND z_y='$zone_y'";  //affiche carte
$result_verif_req = F_Verif_Requete($requete); 

Code PHP :

    <div id="terrains">
        <?php
        while ($lignes = mysql_fetch_row($result_verif_req)) 
        {
        $coordonnees = $lignes[1].'-'.$lignes[2].':'.$lignes[3].'-'.$lignes[4].':'.$lignes[0]; //exemple : 1-1:1-1:1
        echo '<img id='.$coordonnees.' onclick="getID(this)" class="img_terrain" src='.'images/'.$lignes[10].' alt='.$lignes[10].'/>';
        echo '<div class="infos_terrain" id="ter_'.$lignes[0].'">';
        echo $lignes[6];
        echo '</div>';
        } 
        ?> 
    </div>    <!--id terrain --!> 

Voici un exemple de ce que génère le PHP :
<img id="1-1:1-1:1" class="img_terrain" alt="mer.png" src="images/mer.png" onclick="getID(this)"/>
<div id="ter_1" class="infos_terrain" style="visibility: visible;">90583977</div>

Comme un visuel vaut mieux qu'un long discours.
Voici un lien de mon site : ici
J'ai mis un alert pour bien voir que chaque terrain renvoie bien sa capacité.

Je vous remercie d'avance pour votre aide.
Cordialement

Tu devrais plutôt faire :
$('#ter_'+separateur[2]).css("visibility", "visible");

Enfin si j'ai bien compris le problème.

Tu as une map de 7 par 7. Si tu regardes le code source de ta page que tu nous as donné (clique-doit > Afficher la source), tu remarqueras qu'il y a donc 49 <div class="infos_terrain" ...> existantes. Quand tu cliqueras sur un lien, les 49 vont donc s'afficher (puisqu'elles correspondent toutes à la condition que tu donnes ici : $('.infos_terrain').css("visibility", "visible");

Pars donc sur une autre piste. Vu que ces 49 divs ont un ID différent, pourquoi ne pas tenter cela?

Code :

$('#ter_'+ separateur[2]).css("visibility", "visible");

Amicalement,

EDIT : Grillé par Oxman Méssant!