Come ottenereElementByClass invece di GetElementById con JavaScript?

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

Domanda

Sto cercando di attivare/disattivare la visibilità di alcuni elementi DIV su un sito Web in base alla classe di ciascun DIV.Sto utilizzando uno snippet JavaScript di base per attivarli.Il problema è che lo script utilizza solo getElementById, COME getElementByClass non è supportato in JavaScript.E sfortunatamente devo usare la classe e non l'id per nominare i DIV perché i nomi dei DIV vengono generati dinamicamente dal mio foglio di stile XSLT utilizzando determinati nomi di categoria.

So che alcuni browser ora supportano getElementByClass, ma poiché Internet Explorer non lo fa, non voglio seguire questa strada.

Ho trovato script che utilizzano funzioni per ottenere elementi per classe (come il n. 8 in questa pagina: http://www.dustindiaz.com/top-ten-javascript/), ma non riesco a capire come integrarli con il mio script di attivazione/disattivazione.

Ecco il codice HTML.I DIV stessi mancano poiché vengono generati al caricamento della pagina con XML/XSLT.

Domanda principale:Come posso ottenere lo script Toggle seguente per ottenere Elemento per Classe anziché ottenere Elemento per 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>
È stato utile?

Soluzione

I browser moderni supportano document.getElementsByClassName.Puoi vedere la suddivisione completa dei fornitori che forniscono questa funzionalità su posso usare.Se stai cercando di estendere il supporto ai browser più vecchi, potresti prendere in considerazione un motore di selezione come quello trovato in jQuery o un polyfill.

Risposta precedente

Ti consigliamo di controllare jQuery, che consentirà quanto segue:

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

Google offre un file sorgente jQuery ospitato, quindi puoi farvi riferimento ed essere operativo in pochi istanti.Includi quanto segue nella tua pagina:

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

Altri suggerimenti

Il metodo getElementsByClassName è ora nativamente supportato dalle più recenti versioni di Firefox, Safari, Chrome, IE e Opera, si potrebbe creare una funzione per controllare se un'implementazione nativa è disponibile, altrimenti utilizzare il metodo di 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);
  }
}

Utilizzo: 

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 utilizzando getElementsByClassName, restituisce un array di più classi. Perché lo stesso nome della classe potrebbe essere utilizzato in più di un caso dentro stessa pagina HTML. Usiamo una serie di elementi id di indirizzare la classe abbiamo bisogno, nel mio caso, si tratta di prima istanza della classe data name.So Ho usato [0]

di CMS risposta , questo è un approccio più generico di toggle_visibility ho solo me stesso utilizzato: 

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

La mia soluzione:

Per prima cosa creare "