Différencier deux fois le même bloc

Version imprimable

Salut,

J'ai tout une liste d'éléments mais je voudrai pouvoir faire apparaitre que ceux souhaités, en fonction d'un id parce qu'ils sont trop nombreux.
Exemple:
Code:

1 2 3 4 5 6 7 8 1 - Elem 1 1 - Elem 2 2 - Elem 3 2 - Elem 4 2 - Elem 5 3 - Elem 6 3 - Elem 7 4 - Elem 8
Ainsi, si je choisis 4, seul Elem 8 apparait. J'ai donc pour chaque élement un div qui sera caché au départ (et visible lors d'un choix d'id):
Code:

1 2 3 4 5 6 7 8 <div style="display:none">1 - Elem 1</div> <div style="display:none">1 - Elem 2</div> <div style="display:none">2 - Elem 3</div> <div style="display:none">2 - Elem 4</div> <div style="display:none">2 - Elem 5</div> <div style="display:none">3 - Elem 6</div> <div style="display:none">3 - Elem 7</div> <div style="display:none">4 - Elem 8</div>
La mise en page est ainsi de part mon code php (le mieux serait de la laisser ainsi).
Ma question arrive: comment faire simplement pour que, à la selection d'un id, ils se cachent tous, mais pas ceux concernés?
Je pensais a mettre à tous les div un name="div_opt['la_reference']" pour cacher tous les éléments nommés div_opt sauf ceux ayant l'id 'la_reference'. Mais je crois que javascript ne comprend pas ça...

Si vous pouvez m'éclairer.
:merci:

30/10/2006, 19h27
nicocsgamer

Pourquoi ne pas utiliser DOM ? C'est dommage car avec ta solution tu charge tout tes éléments alors que tu n'a pas forcement de tous les afficher. Tu utilise DOM pour construire l'élément qui est nécéssaire. et tu l'ajoute à ta page. Qu'en penses tu ?

Un petit script qui marche, à toi de l'adapter :

Code:

1
2
3
4
5
6
7
8
9
10
11
function affElem(elem){
   var i;
   for(i=1;i<=8;i++){
      if(document.getElementById('div['+i+']').innerHTML.substring(0,1) == elem){
         document.getElementById('div['+i+']').style.display = "block";
      }
      else{
         document.getElementById('div['+i+']').style.display = "none";
      }
   }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<select onchange="affElem(this.value)">
   <option value="0">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>
 
<div style="display:none" id="div[1]">1 - Elem 1</div>
<div style="display:none" id="div[2]">1 - Elem 2</div>
<div style="display:none" id="div[3]">2 - Elem 3</div>
<div style="display:none" id="div[4]">2 - Elem 4</div>
<div style="display:none" id="div[5]">2 - Elem 5</div>
<div style="display:none" id="div[6]">3 - Elem 6</div>
<div style="display:none" id="div[7]">3 - Elem 7</div>
<div style="display:none" id="div[8]">4 - Elem 8</div>

31/10/2006, 08h59
SpaceFrog

lol Bisounours ...

ta notation avec crochets peut prèter à confusion...
div[] n'est pas une collection ...
autant ne pas les mettre ...
31/10/2006, 09h04
Bisûnûrs

@SpaceFrog : C'est vrai, mais j'étais parti sur la base du post d'Anduriel quand il a dit name="div_opt['la_reference']". ^^
31/10/2006, 10h19
denisC

Citation:

Envoyé par SpaceFrog

lol Bisounours ...

ta notation avec crochets peut prèter à confusion...
div[] n'est pas une collection ...
autant ne pas les mettre ...

On peut aussi les mettre. Cette notation est très utilisée en PHP, car PHP fait automatiquement la convertion d'une liste de champ en un vecteur de variables. C'est pour ça que name='blabla[10]' apparait souvent dans les formulaires....

@Anduriel : tu es sur que tu n'as pas un autre moyen de repérer tous les div à fermer? Ce ne sont pas tous les fils d'un même noeud DOM?

Merci Bisounours mais j'ai écrit mon code comme ça pour la clarté de mon problème. Je n'écris pas en brut sur ma page 1 - Elem 1 mais plutot Elem 1, et récupère en même temps l'id (je ne vois pas quoi en faire pour l'instant justement...).

@DenisC: désolé je n'ai pas souvent entendu ce mot DOM :oops:
Tu parles d'une boucle? Ce que je voudrai c'est pouvoir afficher n'importe quelle information sans recharger la page, donc tous les cacher et les montrer au moment voulu. Voila mon code php (en clair):
Code:

1 2 3 4 5 6 7 8 9 $query = mysql_query("SELECT text, refid, vote, position, id FROM phpbook_optsondages ORDER BY refid"); while (list($text, $refid, $vote, $position, $id) = mysql_fetch_array($query)) { echo '<tr>'. '<td colspan="4">'. '<div></div>'. '</td></tr>'; } echo "</table>";
Donc vous voyez je remets dans un nouveau div un élément qui peut avoir la meme id que le précédent. J'aurai pu vérifier cet id et créer un nouveau div s'il était différent du précédent mais j'ai abandonné l'idée (pour la mise en page je crois... )

Merci à vous

Citation:

Envoyé par Anduriel

@DenisC: désolé je n'ai pas souvent entendu ce mot DOM :oops:

Et la :faq: elle sert à quoi:
http://javascript.developpez.com/faq/?page=DOM :mrgreen:
Citation:
Envoyé par Anduriel
Code:

1 2 3 4 5 6 7 8 9 $query = mysql_query("SELECT text, refid, vote, position, id FROM phpbook_optsondages ORDER BY refid"); while (list($text, $refid, $vote, $position, $id) = mysql_fetch_array($query)) { echo '<tr>'. '<td colspan="4">'. '<div></div>'. '</td></tr>'; } echo "</table>";
Donc vous voyez je remets dans un nouveau div un élément qui peut avoir la meme id que le précédent. J'aurai pu vérifier cet id et créer un nouveau div s'il était différent du précédent mais j'ai abandonné l'idée (pour la mise en page je crois... )
Un id doit être unique dans la page (c'est dans la norme HTML). Sinon, si tous tes divs sont dans la meme table ( :vomi: des divs dans une table!!!) tu peux y acceder autrement que par l'id.... (si ça t'interesse)

Comme denisC l'a écrit, un id doit être unique, donc affecte plutôt ta variable $id à l'attribut name et génère toi-même ton id pour que tu aies au final :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table id="gnia">
   <tr>
      <td colspan="4">
         <div style="display:none" id="div1" name="nom1">Elem 1</div>
      </td>
   </tr>
   <tr>
      <td colspan="4">
         <div style="display:none" id="div2" name="nom1">Elem 2</div>
     </td>
   </tr>
   <tr>
      <td colspan="4">
         <div style="display:none" id="div3" name="nom2">Elem 3</div>
      </td>
   </tr>
   ...
</table>

Et tu modifies le code Javascript comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function affElem(elem){
   var nbdiv = document.getElementById('gnia').getElementsByTagName('div').length;
   var i;
   for(i=1;i<=nbdiv;i++){
      if(document.getElementById('div'+i).name.substring(3,4) == elem){
         document.getElementById('div'+i).style.display = "block";
      }
      else{
         document.getElementById('div'+i).style.display = "none";
      }
   }
}