Wie getElementByClass anstelle von GetElementById mit JavaScript?

Question

Dec 19, 2009, 06:38 PM

javascript toggle getelementbyid getelementsbyclassname class

Wie getElementByClass anstelle von GetElementById mit JavaScript?

Ich versuche, die Sichtbarkeit bestimmter DIV-Elemente auf einer Website in Abhängigkeit von der Klasse der einzelnen DIVs umzuschalten. Ich verwende ein einfaches JavaScript-Snippet, um sie umzuschalten. Das Problem ist, dass das Skript nur verwendetgetElementById, wiegetElementByClass wird in JavaScript nicht unterstützt. Und leider muss ich class und nicht id verwenden, um die DIVs zu benennen, da die DIV-Namen von meinem XSLT-Stylesheet mithilfe bestimmter Kategorienamen dynamisch generiert werden.

Ich weiß, dass bestimmte Browser jetzt unterstützengetElementByClassAber da Internet Explorer dies nicht tut, möchte ich diesen Weg nicht einschlagen.

Ich habe Skripte gefunden, die Funktionen verwenden, um Elemente nach Klasse abzurufen (z. B. # 8 auf dieser Seite:http://www.dustindiaz.com/top-ten-javascript/), aber ich kann nicht herausfinden, wie ich sie in mein Toggle-Skript integrieren kann.

Hier ist der HTML-Code. Die DIVs selbst fehlen, da sie beim Laden von Seiten mit XML / XSLT generiert werden.

Hauptfrage: Wie bekomme ich das unten stehende Toggle-Skript, um Element nach Klasse anstatt Element nach ID zu erhalten?

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