Carte interactive : besoin de remplacer 'BOURGOGNE' par des elements

aglae361
Javascript

Bonjour tous, je refais le sujet ici car je l'avais pas posté au bon endroit.

Message d'origine :

J'ai besoin de votre avis et vos lumières
Dans le tutoriel Carte interactive l'auteur met son texte dans ce qu'il appelle un tableau.

Ainsi il met

{name : 'BOURGOGNE', slug: 'provence-alpes-cote-d-azur'},

Moi j'ai besoin de mettre du html avec des Css dedans.
Exemple : 

<p class="f16b">Ain</p>
<ul class="liste">
  <li> Ambérieux : bla</li>
  <li>Bellegarde : bli</li>
  <li>Ferney Voltaire : bla</li>
  <li> Gex : blu</li>
  <li>Hauteville : bla </li>
  <li>Miribel : bla </li>
</ul>
<p class="f16b">Ardèche</p>
<ul class="liste">
  <li> Annonay : blu</li>
  <li>Aubenas : blu</li>
  <li>Aubenas :Palace</li>
  <li> Lalouvesc : blu</li>
  <li> Tournon : blu</li>
  <li> Vals les Bains : blu</li>
</ul>
<p class="f16b">Cote d'Or</p>
<ul class="liste">
  <li> Dijon : blu</li>
  <li>Dijon : blu</li>
  <li> Dijon : blu</li>
</ul>', slug: 'Bourgogne'},

Visiblement quand j'insère cela dans le code original il aime pas.
J'ai pensé que c'était les "" des css qui lui allait pas.

J'ai essayé des trucs mais j'y connais rien. Alors j'y arrive pas.
Question : Est il possible de faire cela et comment y parvenir.

Merci de votre aide précieuse

Réponse de Florian 94:
Essaies ceci : 

{name : 'BOURGOGNE', slug: 'provence-alpes-cote-d-azur', data :'<p class=\'f16b\'>Ain</p><ul class=\'liste\'> <li> Ambérieux : bla</li> <li>Bellegarde : bli</li> <li>Ferney Voltaire : bla</li> <li> Gex : blu</li> <li>Hauteville : bla </li> <li>Miribel : bla </li></ul><p class=\'f16b\'>Ardèche</p><ul class=\'liste\'> <li> Annonay : blu</li> <li>Aubenas : blu</li> <li>Aubenas :Palace</li> <li> Lalouvesc : blu</li> <li> Tournon : blu</li> <li> Vals les Bains : blu</li></ul><p class=\'f16b\'>Cote d\'Or</p><ul class=\'liste\'> <li> Dijon : blu</li> <li>Dijon : blu</li> <li> Dijon : blu</li></ul>'}

Moi : Je viens d'essayer ton code.
J'ai rajoutée la virgule après le dernier </ul> car cela me semblait important de la mettre pour finir comme les autres lignes.

Cela donne donc 

<li> Dijon : blu</li></ul>'},

Mais côté navigateur il ne m'affiche que BOURGOGNE.
:o(

Savez vous pourquoi ?

1 réponse

florian94

La virgule, ça sert à ajouter un élément dans ton tableau, donc si c'est le dernier, elle n'est pas nécessaire. Après, d'après ce que je comprends, c'est que tu veux qu'un élément prenne ce html en compte. Du coup on en revient au code que je t'ai passé :

$(document).ready(function(){
    var test = {name : 'BOURGOGNE', slug: 'provence-alpes-cote-d-azur', data :'<p class=\'f16b\'>Ain</p><ul class=\'liste\'> <li> Ambérieux : bla</li> <li>Bellegarde : bli</li> <li>Ferney Voltaire : bla</li> <li> Gex : blu</li> <li>Hauteville : bla </li> <li>Miribel : bla </li></ul><p class=\'f16b\'>Ardèche</p><ul class=\'liste\'> <li> Annonay : blu</li> <li>Aubenas : blu</li> <li>Aubenas :Palace</li> <li> Lalouvesc : blu</li> <li> Tournon : blu</li> <li> Vals les Bains : blu</li></ul><p class=\'f16b\'>Cote d\'Or</p><ul class=\'liste\'> <li> Dijon : blu</li> <li>Dijon : blu</li> <li> Dijon : blu</li></ul>'}, {name : 'TOTO', slug: 'un-autre-exemple', data :'<p class=\'f16b\'>Ain</p><ul class=\'liste\'> <li> Ambérieux : bla</li> <li>Bellegarde : bli</li> <li>Ferney Voltaire : bla</li> <li> Gex : blu</li> <li>Hauteville : bla </li> <li>Miribel : bla </li></ul><p class=\'f16b\'>Ardèche</p><ul class=\'liste\'> <li> Annonay : blu</li> <li>Aubenas : blu</li> <li>Aubenas :Palace</li> <li> Lalouvesc : blu</li> <li> Tournon : blu</li> <li> Vals les Bains : blu</li></ul><p class=\'f16b\'>Cote d\'Or</p><ul class=\'liste\'> <li> Dijon : blu</li> <li>Dijon : blu</li> <li> Dijon : blu</li></ul>'}];
    $(".exemple").each(function(){
        var index = $(this).index();
        $(this).html(test[index].data);
    });
});
<div class="exemple"></div>
<div class="exemple"></div>

Bon j'ai pas testé mais essaie de chercher dans cette direction ;)