Afficher / masquer des blocs

**Eddoul** · 13/09/2018, 05h44

Bonjour,

J'aurais besoin d'aide car je mer douille pour afficher / masquer des blocs.

J'ai ceci

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
		<!-- ****************************************************************************************
								N I V E A U X      P L O N G E E 
			 ****************************************************************************************
		-->
		Mon niveau de plongée : 
		<!-- <input type="radio" name="niveau_plongee" id="N0" onclick="bascule_niv_plongee('N0'); return false;" value="N0" checked> aucun  
		<input type="radio" name="niveau_plongee" id="N1" onclick="bascule_niv_plongee('N1'); return false;" value="N1"> le niveau 1  -->
		<input type="radio" name="niveau_plongee" id="N0" value="N0" checked> aucun  
		<input type="radio" name="niveau_plongee" id="N1" value="N1"> le niveau 1 
		<input type="radio" name="niveau_plongee" id="N2" onclick="bascule_niv_plongee('N2'); return false;" value="N2"> le niveau 2 
		<input type="radio" name="niveau_plongee" id="N3" onclick="bascule_niv_plongee('N3'); return false;" value="N3"> le niveau 3 
		<input type="radio" name="niveau_plongee" id="N4" onclick="bascule_niv_plongee('N4'); return false;" value="N4"> le niveau 4<br>
 
		<!--  **************************   Niveau 2 ***************************************** -->
		<div id="blk_N2" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value="" checked> aucun
				<input type="radio" name="encadrant_plongee" value="E1"> E1
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value="" checked> aucun
				<input type="radio" name="Nx" value ="NxE"> Elémentaire 
 
			<!--    Niveaux Archéologie   -->
			<br>
				Mon niveau en archéologie : 
				<input type="radio" name="niveau_archeo" id="PA0" value="" id="arche_aucun" checked> aucun 
				<input type="radio" name="niveau_archeo" id="PA1" value="PA1"> PA1
				<input type="radio" name="niveau_archeo" onclick="bascule_inscription('encadrant_archeo'); return false;" value="PA2"> PA2
				<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
					Mon niveau d'encadrement  : 
						<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value="" checked> aucun 
						<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
						<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
						<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
				</div>
		</div>
 
		<!--  **************************   Niveau 3 ***************************************** -->
		<div id="blk_N3" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value="" checked> aucun
				<input type="radio" name="encadrant_plongee" value="E1"> E1
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value=""  checked> aucun
				<input type="radio" name="Nx" value ="NxE"> Elémentaire 
				<input type="radio" name="Nx" value ="NxC"> Confirmé
 
			<!--    Niveaux Archéologie   -->
			<br>
			Mon niveau en archéologie : 
			<input type="radio" name="niveau_archeo" id="PA0" value="PA0" onclick="bascule_niv_plongee('PA0'); return false;" checked> aucun 
			<input type="radio" name="niveau_archeo" id="PA1" value="PA1" onclick="bascule_niv_plongee('PA1'); return false;" > PA1
			<input type="radio" name="niveau_archeo" id="PA2" value="PA2" onclick="bascule_niv_plongee('PA2'); return false;" > PA2
			<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Mon niveau d'encadrement  : 
					<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value=""  checked> aucun 
					<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
					<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
					<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
			</div>
		</div>
 
		<!--  **************************   Niveau 4 ***************************************** -->
		<div id="blk_N4" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value=""  checked> aucun
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_E2" value="E2" > E2
				<input type="radio" name="encadrant_plongee" value="E3"> E3
				<input type="radio" name="encadrant_plongee" value="E4"> E4
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value=""  checked> aucun
				<input type="radio" name="Nx" value ="NxE" > Elémentaire 
				<input type="radio" name="Nx" value ="NxC"> Confirmé 
			<br>
			J'ai le niveau de Trimix : 	<input type="radio" name="Tx" value =""  checked> aucun
										<input type="radio" name="Tx" value ="TxN"> Normoxique 
										<input type="radio" name="Tx" value ="TxH"> Hypoxique
			<!-- **************************   Niveaux Archéologie  ***************************************** -->
			<br>
			Mon niveau en archéologie : 
				<input type="radio" name="niveau_archeo" id="PA0" value="PA0" onclick="bascule_niv_plongee('PA0'); return false;" checked> aucun 
				<input type="radio" name="niveau_archeo" id="PA1" value="PA1" onclick="bascule_niv_plongee('PA1'); return false;"> PA1
				<input type="radio" name="niveau_archeo" id="PA2" value="PA2" onclick="bascule_niv_plongee('PA2'); return false;"> PA2
				<input type="radio" name="niveau_archeo" id="PA3" value="PA3" onclick="bascule_niv_plongee('PA3'); return false;"> PA3
			<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Mon niveau d'encadrement  : 
					<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value=""  checked> aucun 
					<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
					<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
					<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
			</div>
		</div>

je voudrais quand je clique sur N2 par exemple, que la DIV blk_N2 soit afficher, quand je clique sur N3, que la DIV blé_N3 soit afficher mais masque la div blé_N2 si elle était afficher.
En fait, je dois afficher soit la DIV blk_N2 sur je sélectionne sur N2, soit blk_N3 si je sélectionne N3, soit blk_N4 si je sélectionne N4. Une seule DIV doit être afficher.
Si je sélectionne "aucun" ou "N1", les DIV blk_N2, blk_N3 et blk_N4 doivent être masquer.

Mais je mer douille.

voici la page : http://www.scf.asso.fr/index.php?pag...ie_inscription

Merci pour votre aide.

Eddy

**ProgElecT** · 13/09/2018, 09h17

Salut

Attention, chaque ids doit être unique.
Il nous manque la fonction JavaScript bascule_niv_plongee(SrcId), à moins que c'est celle-ci que tu ne sais pas écrire.
Cette fonction (ici dans le head) pourrait ressembler à

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
   <head>
		<script>
			function bascule_niv_plongee(niveau){
				switch(niveau) {
					case'N0':
					case'N1':
					case'N2':
					case'N3':
					case'N4':
						document.getElementById("blk_N2").style.display = 'none';
						document.getElementById("blk_N3").style.display = 'none';
						document.getElementById("blk_N4").style.display = 'none';
						if (niveau !== 'N0' || niveau !== 'N1'){
							let IdDivAffiche = "blk_" + niveau;
							document.getElementById(IdDivAffiche).style.display = 'block';
						}
						break;
 
					case'PA0':
					case'PA1':
					case'PA2':
					case'PA3':
						///document.getElementById("blk_N2").style.display = 'none';
						//document.getElementById("blk_N3").style.display = 'none';
						//document.getElementById("blk_N4").style.display = 'none';
						//if (niveau !== 'N0' || niveau !== 'N1'){
						//	let IdDivAffiche = "blk_" + niveau;
						//	document.getElementById(IdDivAffiche).style.display = 'block';
						//}
						break;
				} // fin du switch
			}
		</script>
   </head>

Pour les ids PA0 à PA3, tu ne dit pas à quoi ils servent....

**johnlobs** · 13/09/2018, 12h59

Bonjour,

@ProgElecT: Attention , la fonction bascule_niv_plongee(niveau) utilise un switch inutile étant donné qu'il n'y a pas de break donc passage par tous les cases.
Il serait préférable d’écrire directement le code du case N4 sans switch pour ne pas créer de confusion dans la compréhension du code.

@Eddoul: Il faut que tu réorganise le code de ta page car je vois de la duplication de code inutile pour les niveau archéologie alors qu'une div te suffit que tu affiche et deplace tes div.

Bon courage.

**ProgElecT** · 13/09/2018, 15h11

Salut

@johnlobs

switch inutile étant donné qu'il n'y a pas de break

c'est bien là l'utilité, pour les conditions N0 à N4 l'effacement des divs blk_N2 à blk_N4 sera fait (lignes 10 à 12), puis affichage de l'une des divs (ligne 15) correspondant à l'id passé en paramètre à la fonction, à la condition que l'id ne soit pas égal à N0 ou N1, puis quitte le switch ligne 17.
Si il veut utiliser la même fonction pour traiter les ids PA0 à PA3, le code continu à la ligne 19, suite du switch.

On peut le faire avec des conditions If, mais là il me semble que s'est plus lisible avec switch ... case

**johnlobs** · 13/09/2018, 15h38

Salut
@ProgElecT

C'est en effet ce que je dis : le code est fonctionnel mais le switch ne sert a rien étant donné que le if est repris dans le cas N4 sur les N0 et N1 .

Code :

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

1
2
3
4
5
6
7
8
 case'N4':
                                                document.getElementById("blk_N2").style.display = 'none';
                                                document.getElementById("blk_N3").style.display = 'none';
                                                document.getElementById("blk_N4").style.display = 'none';
                                                if (niveau !== 'N0' || niveau !== 'N1'){
                                                        let IdDivAffiche = "blk_" + niveau;
                                                        document.getElementById(IdDivAffiche).style.display = 'block';
                                                }

On voit bien a la ligne 5 que le if dont tu parles est utilisé donc switch inutile.
Ceci reviendrait à écrire:

Code :

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

1
2
3
4
5
6
7
8
9
10
<script>
                                 function bascule_niv_plongee(niveau){
                                                document.getElementById("blk_N2").style.display = 'none';
                                                document.getElementById("blk_N3").style.display = 'none';
                                                document.getElementById("blk_N4").style.display = 'none';
                                                if (niveau !== 'N0' || niveau !== 'N1'){
                                                        let IdDivAffiche = "blk_" + niveau;
                                                        document.getElementById(IdDivAffiche).style.display = 'block';
                                                             }
</script>

je n'ai peut etre pas pris le temps de bien lire mais je pense que c'est bon comme cela et c'est très lisible.
Ce n'est qu'une optimisation de code ni plus ni moins.

Cordialement,

**ProgElecT** · 13/09/2018, 15h45

Re

, je suis d'accord, mais ..... les cas PA0 à PA3 ne pourront pas être traités dans cette même fonction (se qui ne serait pas plus mal à mon avis

)

**johnlobs** · 13/09/2018, 18h01

Bonjour,

Nous avons proposé à @Eddoul une première version très simplifiée de la chose afin qu'il puisse s'en inspirer pour poursuivre son travail.
Les cas PA0 etc ne sont pas traités (ou commentés dans ton exemple).

Je pense qu'il a assez de matière pour pouvoir finaliser sont travail....

Merci à toi @ProgElecT pour ton aide

Bon courage @Eddoul

Invité · 15/09/2018, 19h19

Bonjour,

Il suffit d'ajouter des classes et quelques bricoles pour simplifier le tout :

on met des attributs data-blk sur les <input radio>, pour identifier quel bloc ouvrir (data-blk="blk_N2", ... : chaque data-blk correspond à l'id du bloc à ouvrir)
on met une classe "blk_plongee" sur chaque bloc à afficher/masquer (je ne m'occupe ici QUE des 3 blocs "niveau de plongée")
on en profite pour ajouter les <label> (ça permet de cliquer sur le texte pour cocher/décocher) !

Code html :

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
<!-- NIVEAU DE PLONGEE -->
<p>
  Mon niveau de plongée :
  <label><input type="radio" name="niveau_plongee" id="N0" value="N0" checked> aucun</label>
  <label><input type="radio" name="niveau_plongee" id="N1" value="N1"> le niveau 1</label>
  <label><input type="radio" name="niveau_plongee" id="N2" value="N2" data-blk="blk_N2"> le niveau 2</label>
  <label><input type="radio" name="niveau_plongee" id="N3" value="N3" data-blk="blk_N3"> le niveau 3</label>
  <label><input type="radio" name="niveau_plongee" id="N4" value="N4" data-blk="blk_N4"> le niveau 4</label>
</p>
<!-- niveau 2 -->
<div class="blk_plongee" id="blk_N2">
   ...
</div>
<!-- niveau 3 -->
<div class="blk_plongee" id="blk_N3">
   ...
</div>
<!-- niveau 4 -->
<div class="blk_plongee" id="blk_N4">
   ...
</div>

N.B.

Code JavaScript :

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
// NIVEAU DE PLONGEE
var niveaux_plongee = document.querySelectorAll("input[name=niveau_plongee]");
var blocks_plongee = document.querySelectorAll(".blk_plongee");
 
niveaux_plongee.forEach(function(niveau_plongee) {
  niveau_plongee.addEventListener("click", function() {
    var blk_id = niveau_plongee.dataset.blk; // contenu de data-blk
 
    blocks_plongee.forEach(function(blk_plongee) {
      if ( blk_id && blk_plongee.id == blk_id ) {
        blk_plongee.style.display = "block"; // on affiche le bon bloc
      } else {
        blk_plongee.style.display = "none"; // on masque les autres blocs
      }
    });
  });
});

ET C'EST TOUT !

ATTENTION : pour les autres (encadrant_archeo)... comme il a été dit, un id doit être UNIQUE !!
Il faudrait donc remettre de l'ordre dans le code HTML avant de continuer.

**johnlobs** · 17/09/2018, 18h41

Bonjour,

@jreaux62, merci pour ta reponse.

Bon courage

Afficher / masquer des blocs

JavaScript

Discussions similaires

Partager

Partager