Récupérer l'id courant

Version imprimable

Bonjour,

Voici mon travail actuel:
j'ai 4 choix avec 1 définition associé a chacun. Quand je clique sur l'un, une div apparait contenant une definition(display: block). je veux que le choix cliqués changent de couleur ainsi que sa définition associée, et que si l'on reclique dessus, il repasse en noir (et la div se replie).
Pour ne pas rallonger mon code, j'aimerais capturer l'id ou la fonction est appelée pour pouvoir colorer chaque choix cliqués ainsi que sa def.

Pour le moment, j'ai réussi a le faire pour seulement le clic du 1er choix, en utilisant JS. (je pense que ca sera plus court que d'utiliser du CSS en fonction de chaque situation?)
html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <a>definition of:</a>  <span class="bouton" id="bouton_texte1" onclick="javascript:afficher_cacher('definition1');" onmouseover="this.style.cursor='pointer'">choix1</span> <span class="bouton" id="bouton_texte2" onclick="javascript:afficher_cacher('definition2');" onmouseover="this.style.cursor='pointer'">choix2</span> <span class="bouton" id="bouton_texte3" onclick="javascript:afficher_cacher('definition3');" onmouseover="this.style.cursor='pointer'">choix3</span> <span class="bouton" id="bouton_texte4" onclick="javascript:afficher_cacher('definition4');" onmouseover="this.style.cursor='pointer'">choix4/span> <div id="definition1" class="definition" style="display:none"></br> blabla1 </div> <div id="definition2" class="definition" style="display:none"></br> blabla2 </div> <div id="definition3" class="definition" style="display:none"></br> bla bla bla 3 </div> <div id="definition4" class="definition" style="display:none"></br> Bla bla 4 </div>
et le JS associé:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function afficher_cacher(id) /* if click on choix1, choix2..., display his definition*/ { var elmt = document.getElementById("bouton_texte1"); if(document.getElementById(id).style.display=="none") { document.getElementById(id).style.display="block"; // change color elmt.style.color = "#0000FF"; } else { elmt.style.color = "#000000"; document.getElementById(id).style.display="none"; } return true; }
donc, a la place de bouton_texte1, j'aimerais mettre quelque chose qui ressemble a this.id ou this.getelementbyid, ou encore element.id car pour le moment, bouton_texte1 correspond à l'id du choix1 mais pas des autres choix. je veux donc récupérer a sa place l'id courant.

any id ? ^^ :)

11/07/2016, 21h04
mathieu

cela peut se faire en passant simplement le numéro par l'argument de la fonction :
http://jsbin.com/hucodisixe/1/edit?html,js,output

Bonjour,

Citation:

onclick="javascript:afficher_cacher('definition1');"

inutile de mentionner javascript, l'événement onclick attend une action javascript.

Citation:

onmouseover="this.style.cursor='pointer'"

autant passer par le CSS
Code:

1 2 3 .bouton { cursor:pointer; }
Sinon pour le principe il est souvent fait appel/utilisé un attribut data-xxx pour faire le lien entre les éléments
Code:

1 2 3 4 5 <ul> <li class="bouton" data-lien="def_1" onclick="affiche(this)">Définition #1</li> <li class="bouton" data-lien="def_2" onclick="affiche(this)">Définition #2</li>  </ul>
avec une fonction d'affichage
Code:

1 2 3 4 5 function affiche( obj){ var id = obj.dataset.lien; var oElem = document.getElementById(id); // la suite du code qui peut être simplifiée }

code final

merci pour vos remarques :)
Voici le code final fonctionnel:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<a>definition of:</a> <!-- we display definition of KPI if clic on it--> 
<span class="bouton" id="bouton_texte1" onclick="afficher_cacher('1');">choix1</span>
<span class="bouton" id="bouton_texte2" onclick="afficher_cacher('2');">choix2</span>
<span class="bouton" id="bouton_texte3" onclick="afficher_cacher('3');">choix3</span>
<span class="bouton" id="bouton_texte4" onclick="afficher_cacher('4');">choix4</span>
 
    <div id="definition1" class="definition" style="display:none"></br>
<fieldset id="field_set1">      
bla bla 1
</fieldset>       
    </div>
 
 
 
    <div id="definition2" class="definition" style="display:none"></br>
   <fieldset id="field_set2">   
     bla bla2
  </fieldset>    
    </div>
 
 
 
    <div id="definition3" class="definition" style="display:none"></br>
     <fieldset id="field_set3"> 
    blabla3
      </fieldset>
    </div>
 
 
 
 
    <div id="definition4" class="definition" style="display:none"></br>
      <fieldset id="field_set4">
      blabla4
      </fieldset>
    </div>

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#field_set1{
    border-color:#0000FF;
    border-style: solid;
}
#field_set2{
    border-color:#7FFF00;
    border-style: solid;
}
#field_set3{
    border-color:#66CDAA;
    border-style: solid;
}
#field_set4{
    border-color:#FF4500;
    border-style: solid;
}
 
.bouton {
  cursor:pointer;
}

JS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function afficher_cacher(id)
{
	var elmt = document.getElementById("bouton_texte" + id);
	var def = document.getElementById("definition" + id);
 
	if(def.style.display=="none")
	{
      if(id==1)
        {
		elmt.style.color = "#0000FF";
		def.style.display = "block";
          }
      if(id==2)
        {
		elmt.style.color = "#7FFF00";
		def.style.display = "block";
          }
      if(id==3)
        {
		elmt.style.color = "#66CDAA";
		def.style.display = "block";
          }
      if(id==4)
        {
		elmt.style.color = "#FF4500";
		def.style.display = "block";
          }
	}
	else
	{
		elmt.style.color = "#000000";
		def.style.display = "none";
	}
 
	return true;
 
}

merci et bonne journée !

beacoup plus simple et moins gourmand en temps d'exécution (pas de getByID répétitif pas de if inutiles etc.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<a>definition of:</a> <!-- we display definition of KPI if clic on it--> 
<span class="bouton" data-color="#0000FF" id="bouton_texte1">choix1</span>
<span class="bouton" data-color="#7FFF00" id="bouton_texte2">choix2</span>
<span class="bouton" data-color="#66CDAA" id="bouton_texte3">choix3</span>
<span class="bouton" data-color="#FF4500" id="bouton_texte4">choix4</span>
 
    <div id="definition1" class="definition" style="display:none"></br>
<fieldset id="field_set1">      
bla bla 1
</fieldset>       
    </div>
 
 
 
    <div id="definition2" class="definition" style="display:none"></br>
   <fieldset id="field_set2">   
     bla bla2
  </fieldset>    
    </div>
 
 
 
    <div id="definition3" class="definition" style="display:none"></br>
     <fieldset id="field_set3"> 
    blabla3
      </fieldset>
    </div>
 
 
 
 
    <div id="definition4" class="definition" style="display:none"></br>
      <fieldset id="field_set4">
      blabla4
      </fieldset>
    </div>

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#field_set1{
    border-color:#0000FF;
    border-style: solid;
}
#field_set2{
    border-color:#7FFF00;
    border-style: solid;
}
#field_set3{
    border-color:#66CDAA;
    border-style: solid;
}
#field_set4{
    border-color:#FF4500;
    border-style: solid;
}
 
.bouton {
  cursor:pointer;
}

JS: à exécuter au onload (après la création du html)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.setAttribute('data-def', def);// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.dataset.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = dataset.color;//on remets la couleur au bouton
      this.dataset.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.dataset.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

Citation:

Envoyé par sekaijin

beacoup plus simple et moins gourmand en temps d'exécution (pas de getByID répétitif pas de if inutiles etc.

[...]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.setAttribute('data-def', def);// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.dataset.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = dataset.color;//on remets la couleur au bouton
      this.dataset.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.dataset.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

this.dataset.def.style est undefined !

sorry j'ai été trop vite
j'ai oublié que les data-xxx ne contenaient que du texte

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//on initialise tout et on associe les fonctions click en une fois
//on fait donc les getById qu'une fois.
for(var i=1; i<5; i++) {
  //on récupère le bouton et la definition à associer
  var btn = document.getElementById("bouton_texte" + i);
  var def = document.getElementById("definition" + i);
 
  btn.def = def;// associer le bouton et la définition
 
  btn.onclick = function() {//la fonction est simple pour tous les bouton
    if(this.def.style.display=="none")//si la definition est cachée
    {
      this.style.color = this.dataset.color;//on remets la couleur au bouton
      this.def.style.display = "block";//on affiche la définition
    } else {
      this.style.color = "#000000";//on met le bouton en noir
      this.def.style.display = "none";//on cache la definition
    }
    return true;
  }
 
}

pour expliquer le fonctionement on associe au bouton tout ce dont il a besoin
une couleur via data-color et une référence à sa définition via btn.def = def;// associer le bouton et la définition. et on défini la méthode directement sur le bouton pour avoir accès à tous ces éléments.

A+jyt