Agir sur tous les éléments contenant dans 'x' dans leur id

**CyrilD** · 26/07/2010, 11h44

Bonjour,

Voici mon problème, j'ai plusieurs élément commençant par 'galerie' que je cache avec style.display = 'none'
Quand on clique sur un bouton, ca révèle l'élément (donc passe display à ''). Quand on reclique sur le bouton, si l'élément est déjà visible, on le cache à nouveau. Ca me donne un code comme ça dans un onclick :

Code :

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

1
2
3
4
5
6
7
8
9
 
if (document.getElementById('<?php echo 'galerie_1_'.$dossier; ?>').style.display **  'none')
 {
               document.getElementById('<?php echo 'galerie_1_'.$dossier; ?>').style.display * '';
}
else
{
               document.getElementById('<?php echo 'galerie_1_'.$dossier; ?>').style.display * 'none';  
}

Maintenant, j'aimerais que quand on clique sur un de ces éléments, que l'élément courant soit caché ou non, tous les autres éléments soit cachés aussi. Le problème est que je n'ai pas de nom fixe pour chaque élément (sinon je pourrais les cacher un par un) mais par contre, ils commençent tous par 'galerie_'.

Avez vous une solution s'il vous plait ?

Note : les * sont des égales dans mon code

**SpaceFrog** · 26/07/2010, 13h47

un petit lien
http://www.developpez.net/forums/d75...filtre-regexp/

**CyrilD** · 26/07/2010, 14h10

Merci, ca devrait me permettre de réaliser ce que je veux faire sauf que le code de ces fontions sont un peu trop compliqués pour moi.

Après plusieurs essai, les alert me renvoit ça en réponse [object] et cela 3 fois au lieu de ce que j'attendais (6 fois actuellement)

J'utilise ta fonction avec trois paramètres :
document.getElementsByReg('td','id','galerie_*');
mais je me demande si le td en tant qu'objet passe, je devrais peut être mettre un div à la place ^^

Enfin, je vais bidouiller encore un peu ta fonction pour voir ce que ej peux en tirer ^^

**SpaceFrog** · 26/07/2010, 14h11

td passe ...
faut juste pas avoir des id identiques ?

et le object retourné est une collection d'objets html

**CyrilD** · 26/07/2010, 14h20

Envoyé par SpaceFrog

et le object retourné est une collection d'objets html

Aurais tu un lien pertinent pour m'apprendre comment exploiter le contenu de ces collections ?

Il n'y a pas un moyen plus simple dans ta fonction sinon de renvoyer l'id de l'élément courant au lieu de l'ajouter à un object.

J'ai essayé de faire alert(tabElts[i]); mais c'est aussi un object qui m'est renvoyé à la face

**SpaceFrog** · 26/07/2010, 14h31

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
<html>
<head>
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nouvelle page 1</title>
<script type="text/javascript">
 document.getElementsByReg=function(tag,attr,reg){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 
 		  		}
 		else {return	tabReg;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
	         if(reg.test(tabElts[i][attr])){tabReg.push(tabElts[i]);}
	         }
	i++;         
	}
return tabReg;
}
 
 function foo(){
 
 tabtd=document.getElementsByReg('td','id',/galerie_/) // onrecupère la collection d'elements voulus
// retourne la meêm chose que getElementsbyName ou yTagName
// c'est à dire une collection d'objets html
 
// il suffit ensuite de boucler sur le collection
 tdl=tabtd.length;
 
 for(i=0;i<tdl;i++){
	 tabtd[i].style.display='none'
	 }
	 }
 
</script>
 
<style type="text/css">
td{border: solid 1px red;}
</style> 
 
<title>Nouvelle page 1</title>
 
 
 
 
 
</head>
 
<body onload='foo()' >
<table>
<tr>
	<td id="galerie_1">un</td>
	<td id="pasgalerie1">pas deux</td>
	<td id="pasgalerie2">pas trois</td>
	<td id="galerie_3">trois</td>
	<td id="galerie_3">trois</td>
	<td id="galerie_4">quatre</td>	
</tr>
</table>	
</body>
</html>

A noter que dans cet exemple je passe en paramètre directemetn une expression régulière, mais que le script est doté d'un mini interpréteur et que l'on obtient le même résultat avec :

Code :

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

 tabtd=document.getElementsByReg('td','id',"galerie_*")

c'est à dire en lui passant un string qui sera ensuite convertit en regexp

**CyrilD** · 26/07/2010, 14h47

Bon, merci pour ton aide spacefrog mais j'ai pu me débrouiller avec un code que j'ai complétement compris au final (pour pseudo débutant quoi ^^)

Je rappel que le but de la fonction que je vais mettre ci dessous est de cacher tous les autres éléments commençant par 'galerie_' tout en laissant afficher celui sur lequel j'ai cliqué (passé en paramètre de la fonction)

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
 
<script type="text/javascript"> 
function cacher_autres_id (id) 
{
for ( var b=0; b<document.body.all.tags('td').length; b++ )
{ 
var chaine = document.body.all.tags('td')[b].id;
if (chaine != id)
{
var souschaine = "galerie_";
var Resultat = chaine.indexOf(souschaine); 
if (Resultat != -1)
{
document.getElementById(chaine).style.display = 'none';
} 
}
}
}
</script>

**SpaceFrog** · 26/07/2010, 15h07

Bien

Attention toutefois dans ton code, il ne verifie pas si l'id commence par , mais seulement si il contient...
pour commence par il faudrait faire :

Code :

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

1
2
3
4
 
var souschaine = "galerie_";
var Resultat = chaine.indexOf(souschaine); 
if (Resultat == 0)

**CyrilD** · 26/07/2010, 15h14

C'est pas faux mais ce que je recherchais n'étais pas de savoir quels éléments commençaient par x mais plutôt quels éléments contenaient x.

Enfin je me suis mal exprimé dans le titre du premier post donc je vais l'éditer.

**SpaceFrog** · 26/07/2010, 15h17

Oki

Pas de soucis, l'essentiel est que tu aies trouvé une solution qui te convienne.

Agir sur tous les éléments contenant dans 'x' dans leur id

JavaScript

Discussions similaires

Partager

Partager