Boucle de display block/none

Version imprimable

Bonjour,

Dans une page php j'ai un type checkbox avec un onchange dans un <form..., ainsi qu'une série de "n" de balises <a> incrémentées

Ex: <a id="lien1" ... / <a id="lien2" ... etc.

Dans un fichier javascript, je souhaite parvenir à masquer ou afficher l'ensemble de ces liens incrémentés mais je ne suis pas sur de la méthode,
qu'en pensez vous ? D'ailleurs je ne sais pas comment remplacer < 9 par un type array ...
Code:

1 2 3 4 5 6 7 8 function ShowHide(id) { for (i = 1; i < 9; i++) { var showHide = (document.getElementById(id+i).style.display == 'none' ) ? 'block' : 'none'; document.getElementById(id+i).style.display = showHide } }
Merci d'avance pour votre aide,
Cordialement,

:P

12/07/2017, 16h04
SpaceFrog

getElementById => id pas name ...

Je ne vois pas à quoi sert de boucler 9 fois sur le même élément, un id étant unique sur une page
12/07/2017, 16h07
dominos

9 est un test sur un page mais peut y avoir plus...
j'ai mis à jour la synthaxe mais ne fonctionne pas
12/07/2017, 16h14
SpaceFrog

as tu regardé en console ce que te retournait

Code:

console.log(document.getElementById(id+i).style.display)

dans ta boucle ?
12/07/2017, 16h22
dominos

C'est bon ça fonctionne,

Comment remplacer 9 par un array ou un truc du genre, quelques soit le nombre de lien ?

Encore merci
12/07/2017, 16h26
SpaceFrog

Utilise

Code:

querySelectorAll("[id^='"+id+"']")

qui te retournera la collection des element dont l'id commence par id ...
tu n'auras plus qu'a boucler dessus

Comme ceci plus rien fonctionne

Code:

1
2
3
4
5
6
7
function ShowHide(id) 
{
	for (i = 1; i < document.querySelectorAll("[id^='"+id+"']"); i++) { 
		var ShowHide = (document.getElementById(id+i).style.display=='none')?'block':'none';
		document.getElementById(id+i).style.display = ShowHide	 
    }
}

comment veux tu qu'une collection soit inférieure à un integer ??? => lenght

Code:

1
2
3
4
5
6
7
8
9
10
 
function ShowHide(id) 
{
 collection= document.querySelectorAll("[id^='"+id+"']");
cl= collection.length;
 
	for (i = 1; i < cl); i++) { 
		collection[i].style.display = (collection[i].style.display=='none')?'block':'none';
    }
}

fonctionne pas non plus... :roll:

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
function ShowHide(id) 
{
	collection= document.querySelectorAll("[id^='"+id+"']");
	cl = collection.length;
 
	for (i = 1; i < cl); i++) { 
		var ShowHide = (collection[i].style.display=='none')?'block':'none';
		collection[i].style.display = ShowHide	 
    }
}
 
 
ou
 
 
 
function ShowHide(id) 
{
 collection= document.querySelectorAll("[id^='"+id+"']");
cl= collection.length;
 
	for (i = 1; i < cl); i++) { 
		collection[i].style.display = (collection[i].style.display=='none')?'block':'none';
    }
}

12/07/2017, 17h13
SpaceFrog

https://jsfiddle.net/k9m8Lvuj/

le style.display n'est pas initialisé au début, il faut passer par getComptuedSyyle

Bravo c'est exactement ce que je cherchais à faire !!

Effectivement, faut penser à initialiser les balises à afficher => <a id="lenomdulien1" style="display:none ...
Code:

1 2 3 4 5 6 7 8 9 function ShowHide(id) { collection = document.querySelectorAll("[id^='"+id+"']"); cl = collection.length; for (i = 0; i < cl; i++) { display = window.getComputedStyle(collection[i], null).getPropertyValue("display"); collection[i].style.display = (display=='none')?'block':'none'; } }
Remerciement,
Bonne soirée.

:ccool:

12/07/2017, 18h35
NoSmoking

Bonjour,
dans bien des cas on peut également faire un simple

Code:

oElem[i].style.display = oElem[i].offsetHeight ? 'none' : 'block';

Ha oui le offsetHeight est une astuce pour contourner le getComputedStyle.

pour être un peu plus complet on peut faire :

Code:

1
2
3
 function isVisble(elemt){
 return !!( elemt.offsetWidth || elemt.offsetHeight || elemt.getClientRects().length );
}

le script devient alors

Code:

1
2
3
4
5
6
7
8
function ShowHide(id) 
{
	collection = document.querySelectorAll("[id^='"+id+"']");
	cl = collection.length;
	for (i = 0; i < cl; i++) { 
		collection[i].style.display = (isVisible(collection[i]))?'block':'none';
    }
}

Dans le même genre, 2 checkbox (affiche/masque) individuellement des coins (pull-left/pull-right) sur une collection de boutons et affichent des infos complémentaires...

Code:

<input id="check1" type="checkbox" onchange="ShowHide('mag_numero'); ResizeBtn('btn_mag');"><span> Numéros des mags </span>   <input id="check2" type="checkbox"" onchange="ShowHide('nombre_articles'); ResizeBtn('btn_mag');"><span> Nombre d'articles </span>

Code:

<a id="btn_mag<?php echo $field['numero_mag']; ?>" class="btn btn-success btn-lg ?>" style="width:auto; min-width:250px; height:37px; ..."><span id="numero_mag<?php echo $field['numero_mag']; ?>" class="pull-left" style="display:none; ..."><?php echo $field['numero_mag']; ?></span><span id="articles<?php echo $field['nombre_articles']; ?>" class="pull-right" style="display:none; ..."><?php echo $field['nombre_articles']; ?></span><?php echo $field['mag_theme'] ?></a>

Avec la fonction précédende ShowHide(), j'affiche bien les coins individuellement mais dans la fonction suivante, je recherche à savoir si check1 OU check2 est bien coché pour modifier le width du bouton (<a id="btn_mag....) ; Tout fonctionne parfaitement, jusqu'a ce que je change width:250px; par width:auto; min-width:250px;, la fontion devient alors très instable, le retour "widthValue" semble se confondre avec "max-width" ...
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 function ResizeBtn(id) { collection = document.querySelectorAll("[id^='"+id+"']"); co = collection.length; for (i = 0; i < co; i++) { widthValue= parseInt(window.getComputedStyle(collection[i], null).getPropertyValue('width')); //alert(width); //collection[i].style.width = (width=='155')?width+26+'px':''; if (document.getElementById("check1").checked) { collection[i].style.width = widthValue+26+'px'; } else { collection[i].style.width = widthValue-26+'px'; } if (document.getElementById("check2").checked) { collection[i].style.width = widthValue+26+'px'; } else { collection[i].style.width = widthValue-26+'px'; } } // // for (i = 1; i < 40; i++) { // var showHide = (document.getElementById(id+i).style.display == 'none' ) ? 'block' : 'none'; // document.getElementById(id+i).style.display = showHide // } }
(ça fonctionne que si j'utilise 2 fonctions individuelles pour chaque checkbox....)

Merci d'avance pour vos idées :oops:

Problème résolu.

Code:

1
2
3
4
5
6
7
8
function ResizeBtn(id, chekboxId, addWidth) 
{
	collection = document.querySelectorAll("[id^='"+id+"']");
	co = collection.length;
	for (i = 0; i < co; i++) { 
		collection[i].style.width = (document.getElementById(chekboxId).checked)?collection[i].offsetWidth+addWidth+'px':collection[i].offsetWidth-addWidth+'px';
	}
}