Discussion :

[Kasanabyl]

Bonjour,

Je vous demande de l'aide pliz !

ça fait trois jours que je galère sur une problématique probablement liée à mon inexpérience en JS et je n'avance plus du tout.

J'aimerai me servir d'une carte interactive pour travailler la cohérence d'un monde science-fantasy.
Pour ça, j'ai créé une carte de ce monde au format SVG, ce qui me devait me permettre de manipuler chaque élément de cette carte.
En CSS tout va bien, mais en JS / Jquery, je n'y arrive pas.

Avant même de travailler sur les évènements historiques (en injectant des animations), j'ai commencé par un exercice que je croyais simple : dresser l'état du monde à une date précise.

Pour ça, je me suis inspiré de la worldmap intéractive suivante : http://codepen.io/antoniskamamis/pen/zglJE
La personne récupère tous les ID de ses "path" et les compare avec une base de données (officielle) sous format JSON.
A chaque fois qu'il "hover" un pays, un script est généré et récupère quelques infos de ce pays pour les mettre dans une div dynamique nommée "indicator".


J'ai essayé de reproduire ce script, d'abord en utilisant mon propre JSON, mais vu que je n'arrivais pas à l'appeler correctement, j'ai créé une variable "data" qui contient des informations sur chacun des pays que j'ai créé.

Ensuite, j'ai essayé de récupérer tous les ID de mon SVG et le problème coince là :

Code :

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

1
2
var paysId =  $('path').each(function () {
        $(this).attr('id'); });

Cela me donne un tableau (ok) de valeur sous forme "path#paysn.pays.humain" (nok)

Bizarrement, si je tape :

Code :

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

 var id = $('path#pays1').attr('id');

il me retourne bien le nom du pays ! @___@

J'aimerai récupérer le nom de ces ID ainsi : ["pays1", "pays2"..] et les "associer" avec les valeurs "nom_pays" contenues dans mon tableau DATA.
Ce qui doit me permettre in fine d'afficher les infos de chacun des pays dans ma DIV.indicator. (j'en suis pas encore là mais si vous avez une piste..?)

Voici un bout de ce code (j'ai 127 ID)

http://codepen.io/kasanabyl/pen/mPbYYN

Est ce que je m'y prends mal ? Quelqu'un peut il m'aiguiller ou me débloquer ?

[SpaceFrog]

Oui tu t'y prends doublement mal ...

1 document.ready ...

afin que le code jquery ne soit lancé qu'eun fois la page chargée ...


ensuite dans le each colle les id dans un array ..

http://codepen.io/anon/pen/oxNvpy

[Kasanabyl]

Je te remercie !