Afficher / Cacher des <div> par Class [Résolu]

Salut,

Merci beaucoup, marcv, pour ta réponse, même si je ne suis pas encore arrivé à l'exploiter

a écrit :
Je peux t'en conseiller des bien plus performantes.

J'avais trouvé aussi ces exemples, mais mon niveau de javascript n'est pas suffisant à me permettre de les utiliser...

a écrit :
De plus, getElementsByClassName est déjà implémenté en natif dans certains navigateurs (Firefox par exemple)

Alors j'ai essayé:

function visibilite(thingClass)
         {
           var targetElement;
           targetElement = document.getElementByClassName(thingClass) ;
           if (targetElement.style.display == "none")
           {
           targetElement.style.display = "" ;
           } else {
           targetElement.style.display = "none" ;
           }
         }

Pourtant Firebug me dit: document.getElementByClassName is not a function

et d'autre part mon travail est destiné à des gents qui utilisent essentiellement IE
(c'est incroyable, je te jure, il y en a encore!!!)

ça c'est les checkbox à cocher:

<table>
 <caption>Cochez pour visualiser les contrôles</caption>
 <tr>
 <td>Afficher A <input type="checkbox" onchange="javascript:visibilite('controle_r'); return false;"/></td>
 <td>Afficher B <input type="checkbox" onchange="javascript:visibilite('controle_n'); return false;"/></td>
 <td>Afficher C <input type="checkbox" onchange="javascript:visibilite('controle_s'); return false;"/></td>
 <td>Afficher D <input type="checkbox" onchange="javascript:visibilite('controle_d'); return false;"/></td>
  </tr>
</table>

ici les <div> à afficher (juste quelques uns, regroupés ici, mais éparpillés dans le code):

<div class="controle_n" style="display:none;">Ciao!</div>
 <div class="controle_r" style="display:none;">CouCou!</div>
 <div class="controle_r" style="display:none;">Pinguin!</div>
 <div class="controle_s" style="display:none;">Tata!</div>
 <div id="controle_d" style="display:none;">Superman!</div>

est-ce si bizarre d'avoir à faire ça par class et non pas par id?!

Merci encore pour toute suggestion

a écrit :
Pourtant Firebug me dit: document.getElementByClassName is not a function

document.getElementsssssssssssssssByClassName

a écrit :
onchange="javascript:visibilite('controle_r'); return false;"

1) l'événement "change" n'est émis que lorsque le focus quitte l'élément, il vaut mieux ici utiliser onclick.
2) le "javascript:" c'est quand tu veux utiliser une ligne de code en tant qu'url. Ce n'est pas le cas ici, donc ouste !
3) "return false", c'est pour annuler une soumission de formulaire. Vu qu'un click sur une case à cocher ne déclenche pas de soumission, tu n'as rien à annuler. Ouste aussi !

a écrit :
et d'autre part mon travail est destiné à des gents qui utilisent essentiellement IE
(c'est incroyable, je te jure, il y en a encore!!!)

La méthode que je te proposais utilisais le getElementsByClassName natif lorsqu'il est dispo (Firefox, Safari, Chrome, Opera)), et la moulinette Javascript pour le rest of the world (IE ). C'est également ce que fait le code ci-dessous.

Voici un leger développement de ce que je t'avais proposé (testé très très rapidement) :

function getElementsByClass(className, context) {
    context = context || document;
    if (document.getElementsByClassName) {
        return context.getElementsByClassName(className);
    } else {
        var classElements = [];
        var els = context.getElementsByTagName('*');
        var pattern = new RegExp('(^|\\s)' + className + '(\\s|$)');
        for (i=0, l=els.length; i<l; i++) {
            if (pattern.test(els[[#000]i].className)) {
                classElements.push(els[[#000]i]);
            }
        }
        return classElements;
    }
}

function visibilite(elements) {
    if (elements.constructor != Array && typeof elements.item != 'function') {
        elements = [[#000]elements];
    }
    for (var i=0, l=elements.length; i<l; i++) {
        var isVisible = elements[[#000]i].style.display != 'none';
        elements[[#000]i].style.display = isVisible ? 'none' : '';
    }
}

Tes checkboxes ressembleraient donc désormais à ça :

<input type="checkbox" onclick="visibilite(getElementsByClass('controle_r'));"/>

Tu pourrais faire plus propre encore en virant le onclick de la balise HTML, mais à chaque jour suffit sa peine
Modifié par marcv (09 Jul 2009 - 16:25)

Merci beaucoup marcv, ton script marche à merveille!

entre temps (j'allais justement le poster ) j'ai trouvé cet autre script qui marche lui aussi:

function visibilite(classe){
  var lesDivs = document.getElementsByTagName("div");
  for (var i = 0; i<lesDivs.length; i++){
  if (lesDivs.item(i).className == classe){
  if (lesDivs.item(i).style.display=="none") 
  lesDivs.item(i).style.display=""; 
  else 
  lesDivs.item(i).style.display="none"; 
   }
   }						
   }

et tes remarques:

a écrit :
1) l'événement "change" n'est émis que lorsque le focus quitte l'élément, il vaut mieux ici utiliser onclick.
2) le "javascript:" c'est quand tu veux utiliser une ligne de code en tant qu'url. Ce n'est pas le cas ici, donc ouste !
3) "return false", c'est pour annuler une soumission de formulaire. Vu qu'un click sur une case à cocher ne déclenche pas de soumission, tu n'as rien à annuler. Ouste aussi !

m'ont permis d'améliorer le comportement des checkboxes, surtout sous IE!

Merci encore,

GrandVampire