Comment getElementByClass au lieu de GetElementById avec JavaScript?

StackOverflow https://stackoverflow.com/questions/1933602

Question

Je suis en train de basculer la visibilité de certains éléments DIV sur un site Web en fonction de la classe de chaque DIV. J'utilise un extrait de code JavaScript de base pour les activer. Le problème est que le script utilise uniquement getElementById, comme getElementByClass est pas pris en charge JavaScript. Et malheureusement, je ne dois utiliser la classe et non id pour nommer les DIVs parce que les noms de DIV sont générées dynamiquement par mon XSLT en utilisant stylesheet certains noms de catégorie.

Je sais que certains navigateurs prennent désormais en charge getElementByClass, mais depuis Internet Explorer ne pas que je ne veux pas aller dans cette voie.

J'ai trouvé des scripts à l'aide de fonctions pour obtenir des éléments de classe (tels que # 8 sur cette page: http://www.dustindiaz.com/top-ten-javascript/ ), mais je ne peux pas comprendre comment les intégrer avec mon script bascule.

Voici le code HTML. Les DIVs eux-mêmes sont absents car ils sont générés sur la charge de la page avec XML / XSLT.

Question principale: Comment puis-je obtenir le script ci-dessous Toggle pour obtenir des éléments par classe au lieu d'obtenir des éléments par ID 

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
Était-ce utile?

La solution

Les navigateurs modernes ont un soutien pour document.getElementsByClassName. Vous pouvez voir la ventilation complète qui fournisseurs offrent cette fonctionnalité caniuse . Si vous cherchez à étendre son soutien dans les anciens navigateurs, vous pouvez envisager un moteur de sélection comme celle trouvée dans jQuery ou un polyfill.

Older Réponse

Vous voulez vérifier dans jQuery , ce qui permettra à ce qui suit: 

$(".classname").hide(); // hides everything with class 'classname'

Google offre une source de fichier jQuery hébergé, vous pouvez le référencer et être en place et en cours d'exécution dans les moments-. Inclure ce qui suit dans votre page: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Autres conseils

La méthode getElementsByClassName est désormais pris en charge nativement par les versions les plus récentes de Firefox, Safari, Chrome, Internet Explorer et Opera, vous pouvez faire une fonction pour vérifier si une implémentation native est disponible, sinon utilisez la méthode Dustin Diaz: 

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Utilisation: 

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Acyually en utilisant getElementsByClassName, elle retourne un tableau de plusieurs classes. Parce que même nom de classe peut être utilisée dans plus d'une instance à l'intérieur même page HTML. Nous utilisons id élément de tableau pour cibler la classe dont nous avons besoin, dans mon cas, il est d'abord de la classe donnée name.So je l'ai utilisé [0]

ajouter à la réponse de CMS , c'est une approche plus générique de toggle_visibility Je viens moi-même utilisé: 

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Ma solution:

Tout d'abord créer "