Discussion :

[Anduriel]

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 :

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

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 :

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

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.

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

[Bisûnûrs]

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

Code Javascript :

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

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

[SpaceFrog]

lol Bisounours ...

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

[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']". ^^

[denisC]

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?

[Anduriel]

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

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

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

[denisC]

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

Et la elle sert à quoi:
http://javascript.developpez.com/faq/?page=DOM

Code :

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

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 ( des divs dans une table!!!) tu peux y acceder autrement que par l'id.... (si ça t'interesse)

[Bisûnûrs]

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

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

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