Masquer / Afficher DIV dans un WHILE

**Brezhoneg17** · 31/10/2017, 10h54

Bonjour,

Je me permets de solliciter de l'aide car je galère depuis un moment, et malgré les différentes infos sur la toile, je ne capte pas pourquoi ça ne marche pas...
Finalité : A partir d'un while, je place le contenu de chaque boucle dans un div, et chaque div pourra être affiché/masqué grâce à un petit bouton "+" / "-". Pour le moment j'ai pris un exemple simple (ne marchant pas...) mais la finalité ne sera pas quelques lignes d'affichages mais plusieurs tableaux dont les données seront récupérées dans des BDD.

Ce que j'essaie de faire : Étant donné qu'un ID est unique, j'essaie de récupérer toutes les div avec getElementByTagName('div'). Si j'ai bien ce dernier récupère un tableau avec tous les div. Ensuite je boucle sur le nombre de div trouvés et pour chaque div je récupère sa classe grâce à getElementByClassName('test'.i). Et après le reste du code me permet d'afficher ou masquer le contenu.

Ce qui se passe réellement : Et bien... Soit j'arrive à afficher en magouillant avec getElementByClassName, mais il me sort le même contenu à chaque fois pour chaque bouton "+", soit j'ai le bon nombres de boutons mais... Rien ne se passe au clic (c'est actuellement ce qui correspond au code ci-dessous).

Voila pour le moment, je suis preneur de toutes idées !

[Update]

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
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
<html>
 
<?php 
$i=0;
$lun1 = 1;
$mar1 = 2;
$mer1 = 1;
$jeu1 = 7;
$ven1 = 8;
$sam1 = 1;
$dim1 = 4;
 
while($i!=3){
        $i=$i+1;
        $lun1 = $lun1+1;
 
?>
<button type="button" onclick= "disparaitre()">+</button>	
<!-- echo '<button id="test'.$i.'" onclick = "disparaitre()">+</button>'; -->
 
<?php echo '<div class="test'.$i.'" style="display:none">';
?>
 
 
 
<tr>
						<td>&nbsp;</td>							
							<td><?php echo $lun1 ;?></td>
							<td><?php echo $mar1 ;?></td>
							<td><?php echo $mer1 ;?></td>
							<td><?php echo $jeu1 ;?></td>
							<td><?php echo $ven1 ;?></td>
							<td><?php echo $sam1 ;?></td>
							<td><?php echo $dim1 ;?></td>							
						</tr>
 
</div>	
 
 
 
<!-- Le JS... -->
 
<script type="text/javascript">
                         function disparaitre()
                {
                var b = document.getElementsByTagName('div');
                for (i=0; i<b.length; i++){
                        var a = b.getElementsByClassName('test')[i];
                        if( a[i].style.display=="none") { // Si le div est masqué...
                         a[i].style.display = "block"; // ... on l'affiche...
                        bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
                    } else { // S'il est visible...
                         a[i].style.display = "none"; // ... on le masque...
                        bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
                        }
                 
                 
                } 
                }
</script>
<?php } ?>					
 
<html/>

**Celira** · 31/10/2017, 11h12

Question bête : si tu as un identifiant unique pour chaque div, pourquoi ne pas mettre un attribut id sur ta div et la retrouver avec getElementById ?

Au passage, pour nous montrer ton code, un copier-coller dans le message est beaucoup plus simple qu'une capture d'écran

(et ça nous permet de le recopier facilement sans avoir à tout retaper à la main)

**Brezhoneg17** · 31/10/2017, 11h20

Et bien si j'ai un ID unique de ce que j'ai pu voir sur le net, je ne vais pas pouvoir récuperer le contenu de X div dont l'id est le même, seul le 1er sera prit en compte.
C'est pourquoi j'utilise getElementsClassName

**Celira** · 31/10/2017, 11h50

Oui, c'est comme qui dirait le principe d'un id unique : il est unique

Donc tu ne peux l'utiliser qu'à un seul endroit.
Mais tu veux un bouton pour chaque div non ? et donc chaque div est unique ? ou alors j'ai rien compris

**Brezhoneg17** · 31/10/2017, 12h03

ahah en effet c'est le principe. Je dois mal m'expliquer...
Mon while boucle ,dans l'exemple 3 fois (mais en réalité avec le while de la BDD je ne sais combien il y aura de div contenant les données)
Si je mets un bouton dans ma boucle (donc dupliqué 3 fois), et que je déclare ma div tel que "id=test", lors du clic sur n'importe quel bouton il affichera la même chose, soit l'équivalent du 1er id de la première boucle.
En fouillant sur les forums la solution qui revenait était de passer par getElementsByClassName plutôt que par getElementById ... Mais je cale. J'espère avoir été plus clair

**Celira** · 31/10/2017, 12h10

Tu as trois blocs pilotés par le même bouton ou trois boutons ?
Le plus simple ne serait-il pas de passer l'id en paramètre de ta fonction pour que ton bouton sache quelle div fermer.

Code :

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

1
2
3
<button type="button" onclick= "disparaitre(<?php echo 'test'.$i?>)">+</button>	
 
<?php echo '<div id="test'.$i.'" style="display:none">';?>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function disparaitre(id)
{
    var la_div = document.getElementsById(id);
    if( la_div.style.display=="none") { // Si le div est masqué...
        la_div.style.display = "block"; // ... on l'affiche...
        bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
    } else { // S'il est visible...
        la_div.style.display = "none"; // ... on le masque...
        bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
    }
}

Masquer / Afficher DIV dans un WHILE

JavaScript

Vue hybride

Discussions similaires

Partager

Partager