Discussion :

[apdf1]

Bonjour,

J'ai un problème pour cacher ou afficher plusieurs Id avec mon code j'arrive à cacher/afficher les id uniquement sur la première ligne d'id , mais pas celles en dessous?
mon code simplifier

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
        <style>
        .bouton{
	color:#0000ff;
	font-size:24px;
	cursor:pointer;}
.bouton:hover{
	text-decoration:underline;}
.texte{
	border:1px solid #333333;
	background:#eeeeee;
	padding:10px;
	color:#333333;}
.texte:hover{
	border:1px solid #000000;
	background:#cccccc;
	color:#000000;    
        </style>
 
 
 <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
 
<text transform="matrix(1 0 0 1 148.251 72.3003)">   <tspan id="texte" x="-5.6" y="0" class="texte">Lauderdale</tspan></text>
<text transform="matrix(1 0 0 1 226.5005 80.2905)">  <tspan id="texte" x="-4" y="0" class="texte">Limeston</tspan></text>
<text transform="matrix(1 0 0 1 279.4019 87.4546)">  <tspan id="texte" x="-5" y="0" class="texte">Madison</tspan></text>
 
        <script type="text/javascript">
        //<!--
	        afficher_cacher('texte');
        //-->
        </script>
 
          <script type="text/javascript">
        function afficher_cacher(id)
{
	if(document.getElementById(id).style.visibility=="hidden")
	{
		document.getElementById(id).style.visibility="visible";
		document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
	}
	else
	{
		document.getElementById(id).style.visibility="hidden";
		document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
	}
	return true;
}
 
         </script>

Merci de toute l'aide que vous pourrez m'apporter

Bonne journée

Max

[Invité]

Bonjour,

C'est normal si le même id est dupliqué. Un id DOIT ETRE UNIQUE.

On utilise une classe, et getElementByClassName, puis for pour parcourir les éléments.

En jQuery, la syntaxe est nettement simplifiée.

le sujet a été traité 1000 fois...

[apdf1]

Bonjour jreaux62

Je te remercie peut tu me dire comment arranger mon code avec getElementByClassName puis for

Je te remercie

Max

[Invité]

le sujet a été traité 1000 fois...

Champ "recherche", tout en haut à droite.

[apdf1]

Re,

Oui mais j'ai chercher et je ne le trouve pas je doit être un boulet

[Invité]

Non tu n'es pas un boulet.
J'ai cherché aussi, et on trouve surtout de la m.... pas grand chose...

• document.getElementsByClassName

[apdf1]

Re,

je suis allé voir" document.getElementsByClassName" J'ai mis comme non de classe "Texte"
J'ai fait ceci mais sa ne fonctionne?

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
22
23
            <script type="text/javascript">
        //<!--
	        afficher_cacher('texte');
        //-->
        </script>
 
          <script type="text/javascript">
        function afficher_cacher(Texte)
{
	if(document.getElementByClassName('Texte').style.visibility=="hidden")
	{
		document.getElementByClassName('Texte').style.visibility="visible";
		document.getElementByClassName('bouton_'+'Texte').innerHTML='Cacher le texte';
	}
	else
	{
		document.getElementByClassName('Texte').style.visibility="hidden";
		document.getElementByClassName('bouton_'+'Texte').innerHTML='Afficher le texte';
	}
	return true;
}
 
         </script>

et après j'ai fait ceci

Code :

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

1
2
3
4
          var test = document.getElementsByClassName('test');
 Array.filter( test, function(elem){
   return Array.indexOf( test, elem.parentNode ) > -1;
 });

A+

[Invité]

En fait, c'est tout simple (quand on sait faire !).

1/ enlève les id="texte" et garde les class="texte" (qui existent déjà) :

Code :

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

1
2
3
4
5
<span class="bouton" id="bouton_texte" onclick="afficher_cacher('texte');">Afficher le texte</span>
 
<text transform="matrix(1 0 0 1 148.251 72.3003)">   <tspan class="texte" x="-5.6" y="0">Lauderdale</tspan></text>
<text transform="matrix(1 0 0 1 226.5005 80.2905)">  <tspan class="texte" x="-4" y="0">Limeston</tspan></text>
<text transform="matrix(1 0 0 1 279.4019 87.4546)">  <tspan class="texte" x="-5" y="0">Madison</tspan></text>

2/ le JavaScript :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
function afficher_cacher(e)
{
  var elts = document.getElementsByClassName(e);
  var nbre_elts = elts.length;
 
  for( var i=0; i<nbre_elts; i++)
  {
    elts[i].style.visibility = (elts[i].style.visibility=="hidden")? "visible":"hidden";
  }
}
// onload
afficher_cacher('texte');

3/ variante, avec Array.filter :

Code JavaScript :

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

1
2
3
4
5
6
7
8
function afficher_cacher(e)
{
  Array.filter( document.getElementsByClassName(e), function(elem){
   return elem.style.visibility = (elem.style.visibility=="hidden")? "visible":"hidden";
  });
}
// onload
afficher_cacher('texte');

4/ Pour modifier le texte du bouton, ajouter :

Code JavaScript :

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

  document.getElementById('bouton_texte').innerHTML = (document.getElementById('bouton_texte').innerHTML == "Afficher le texte")? "Masquer le texte":"Afficher le texte";

Par contre, comme la fonction est appelée aussi sur le onload, il faut modifier le HTML :

Code :

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

<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Masquer le texte</span>

• EXEMPLE : https://codepen.io/jreaux62/pen/PjKVOM

[NoSmoking]

Bonjour,
de nos jours, voire même avant, il y existe Document.querySelectorAll().

[apdf1]

Re,

Je te remercie beaucoup sa fonctionne nickel sauf bémol j’avais mon lien "afficher_cacher" qui changer et maintenant non ou j'ai fait l'erreur?


Merci et bon WE

Max

[Invité]

• querySelectorAll()

Ah oui ! C'est lui que je cherchais ! (Oh ! on est samedi matin... )
et perso, j'utilise surtout jQuery....

Il faut alors remplacer :

• getElementsByClassName par querySelectorAll.
• afficher_cacher('texte') par afficher_cacher('.texte').

Code html :

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

<span class="bouton" id="bouton_texte" onclick="afficher_cacher('.texte');">Masquer le texte</span>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
function afficher_cacher(e)
{
  document.getElementById('bouton_texte').innerHTML = (document.getElementById('bouton_texte').innerHTML == "Afficher le texte")? "Masquer le texte":"Afficher le texte";
 
  Array.filter( document.querySelectorAll(e), function(elem){
   return elem.style.visibility = (elem.style.visibility=="hidden")? "visible":"hidden";
  });
}
// onload
afficher_cacher('.texte');

• https://codepen.io/jreaux62/pen/PjKVOM