Discussion :

[Monky]

Bonjour,

Je souhaiterais intégrer une variable à l'intérieur d'une balise html pour en facilité la gestion (gros de volume/redondance), ne pouvant utiliser du php et mysql)

J'ouvre une lightbox à l'intérieur de laquelle je souhaiterais afficher les variables :

Code html :

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

<a class="fancybox" href="#profil" title="Liste des profils"><img class="vignette" src="design/vignette.png" /></a>

puis la lightbox :

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="profil" style="width:400px;display: none;">
<span class="dispoprofil"><center>Disponible sur les profils suivants :</center></span>
<div class="list-group">
  <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-times"></i><span class="item">Profil 1</span></li></ul></a>
  <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 2</span></li></ul></a>
  <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 3</span></li></ul></a>
  <a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-check"></i><span class="item">Profil 4</span></li></ul></a>
...
</div>

L'idée serait de gérer la valeur de la classe <i> à partir d'une liste de variable

Code :

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

1
2
3
var dispo=new Array(2);
dispo[0]="check";
dispo[1]="times";

pour générer :

Code html :

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

<a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-<script>document.write(dispo[1]);</script>"></i><span class="item">Profil 1</span></li></ul></a>

Mais cela ne donne soit aucun résultat, la puce n'est plus visible.

Pourriez-vous m'orienter sur cette réalisation?
Merci par avance

[NoSmoking]

Bonjour,
pour commencer il serait intéressant que tu lises Comprendre document.write() en JavaScript.

[Monky]

Bonjour,

Merci pour le lien qui m'a permis de me former un peu au javascript.

Après beaucoup de tâtonnements, je suis parvenue à récupérer ma variable dans mon code html grâce à un document.getElementById et un innerHTML (et sans étant vraiment certaine de comprendre ce que j'ai réalisé). Le code doit être pour vous très mauvais, il a le mérite de réaliser ce que je souhaite voir. J'en ai profité pour ajouter la variable du nom de la page pour générer mes list à partir du nom de page automatiquement.

Voici mon charabia :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
 
var sPath = window.location.pathname;
//var sPage = sPath.substring(sPath.lastIndexOf('\\') + 1);
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var page = sPage.replace(".html", ""); 
 
var dispo=new Array(2);
dispo[0]="times";
dispo[1]="check";
 
var pga = "_profil1"
var dispo_pga = page + pga
var dispo_pga = (dispo[0]);
 
</script>
 
		<div id="profil_orl" style="width:400px;display: none;"><script> 
document.getElementById("profil_orl").innerHTML = '<a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil 1</span></li></ul></a><a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil général</span></li></ul></a><a class="list-group-item"><ul class="fa-ul"><li><i class="fa-li fa fa-' + dispo_pga + '"></i><span class="item">Profil général</span></li></ul></a>';
</script>
</div>

J'essaie maintenant d'améliorer l'aspect visuel du code. Est-il possible de cumuler les document.getElementById pour un confort de lecture ?

Genre :

Code :

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

1
2
3
document.getElementById("profil_orl").innerHTML = 'ma liste 1';
document.getElementById("profil_orl").innerHTML = 'ma liste 2';
document.getElementById("profil_orl").innerHTML = 'ma liste 3';

ou lieu de :

Code :

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

document.getElementById("profil_orl").innerHTML = 'ma liste 1' + 'ma liste 2' + 'ma liste 3';