Cacher ou afficher plusieurs Id

Version imprimable

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:

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

24/06/2017, 07h56
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.

:recherch: le sujet a été traité 1000 fois...
24/06/2017, 08h08
apdf1

Bonjour jreaux62

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

Je te remercie

Max
24/06/2017, 08h22
Invité

Citation:

Envoyé par jreaux62

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

Champ "recherche", tout en haut à droite.
24/06/2017, 08h25
apdf1

Re,

Oui mais j'ai chercher et je ne le trouve pas je doit être un boulet
24/06/2017, 08h40
Invité
Non tu n'es pas un boulet.
J'ai cherché aussi, et on trouve surtout ~~de la m....~~ pas grand chose... :aie:
- document.getElementsByClassName

Re,

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

Code:

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:

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

A+

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:

1 2 3 4 5 Afficher le texte <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:

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:

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:

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:

Masquer le texte

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

24/06/2017, 09h08
NoSmoking

Bonjour,
de nos jours, voire même avant, il y existe Document.querySelectorAll().
24/06/2017, 09h10
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

querySelectorAll()

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

Il faut alors remplacer :

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

Code:

Masquer le texte
Code:

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