Cacher les class par une variable

Sujet résolu

30 janvier 2015 à 8:37:10

Bonjour à tous !

Je voudrais savoir si c'est possible de cacher une div par sa class avec un variable?

Pour être précis, j'ai une liste déroulante, et si l'utilisateur coche le choix "sport", que les div avec la class sport s'affiche et les autres se cache:

Voici mon code :

<script>

    function showing(item)
    {
        var test = item.value;
        console.log(test);
    }

</script>

</head>

<body>

<select onchange="showing(this)">
    <option value="all">Tout</option>
    <option value="musik">Musique</option>
    <option value="sport">Sport</option>
    <option value="news">News</option>
</select>

<div class="musik">Musique 1</div>
<div class="sport">Sport 1</div>
<div class="musik">Musique 2</div>
<div class="news">News 1</div>
<div class="musik">Musique 3</div>
<div class="sport">Sport 2</div>
<div class="sport">Sport 3</div>
<div class="sport">Sport 3</div>

</body>

Je ne sais quoi mettre dans le script...

Merci d'avance !

W.Lawson's

30 janvier 2015 à 17:23:15

Bonjour.

Lors d'un précédent POST, j'avais "bricolé" une page pour un "zéro-naute".
Je viens de l'adapter à votre cas d'espèce...
Copiez la !... Testez la, et inspirez vous en pour votre projet....

<!doctype html>
<HTML><HEAD>
<script type="text/javascript">
     choix = 'Choisissez' ;
     function modification(mySelect)
     {
     array = document.getElementsByClassName(choix) ;
     for (I=0; I<array.length; I++)
          { array[I].style.display = "none" ; }    
     Index = mySelect.selectedIndex ;
     nouveau_choix = mySelect.options[Index].value ; 
     array = document.getElementsByClassName(nouveau_choix) ;
     for (I=0; I<array.length; I++)
          { array[I].style.display = "block" ; }
     choix = nouveau_choix ;
     }
</script>
</HEAD><BODY style="font: 16px verdana;">
     RUBRIQUE : <select onchange="modification(this)">
          <option value="Choisissez">Choisissez</option>
          <option value="Sport">Sport</option>
          <option value="Musique">Musique</option>          
     </select>
     <div class="Sport" style="display: none;"><h1 style="color: red;">F . I . F . A</h1></div>
     <div class="Sport" style="display: none;"><h1 style="color: blue;">W . B . A</h1></div>
     <div class="Musique" style="display: none;"><h1 style="color: green;">Le 'Top Ten' de la semaine</h1></div>     
</BODY></HTML>

-
Edité par W.Lawson's 31 janvier 2015 à 9:07:56

SebLePanda

3 février 2015 à 15:56:32

TOP! Merci !