Discussion :

[dominos]

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 :

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

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,

[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

[dominos]

9 est un test sur un page mais peut y avoir plus...
j'ai mis à jour la synthaxe mais ne fonctionne pas

[SpaceFrog]

as tu regardé en console ce que te retournait

Code :

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

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

dans ta boucle ?

[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

[SpaceFrog]

Utilise

Code :

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

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

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

[dominos]

Comme ceci plus rien fonctionne

Code :

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

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	 
    }
}

[SpaceFrog]

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

Code :

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

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';
    }
}

[dominos]

fonctionne pas non plus...

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
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';
    }
}

[SpaceFrog]

https://jsfiddle.net/k9m8Lvuj/

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

[dominos]

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

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

Code :

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

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.

[NoSmoking]

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

Code :

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

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

[SpaceFrog]

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

pour être un peu plus complet on peut faire :

Code :

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

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

le script devient alors

Code :

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

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';
    }
}

[dominos]

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 :

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

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

Code :

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

<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 :

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
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

[dominos]

Problème résolu.

Code :

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

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';
	}
}