toggle .style.display (getElementsByClassName)

cottton · 22. Oktober 2012

warum funktioniert das hier nich: http://jsfiddle.net/rb7bn/67/
?

Versteh das net.
ich hab nen simples script, das id´s umschaltet:

JavaScript

<script type="text/javascript">
    <!--
        function toggle(element) {  /* script taken from: http://www.mediengestalter.info/forum/4/divs-oeffnen-und-schliessen-79923-1.html */
           var el = document.getElementById(element);
           (el.style.display == 'none')
           ? el.style.display = ''
           : el.style.display = 'none';
        }
    //-->
    </script>

Per id gehts. Aber eine id kann ja nur einmal.
Wieso geht das nicht mit class ?

Roland · 22. Oktober 2012

document.getElementsByClassName
vor einem Jahr musste man die Funktion noch selbst bauen wusste gar nicht das es die jetzt einfach so gibt.

und dann hast halt in deinen el ein array stehen wo du bei jedem einzelnen den style ändern musst

JavaScript

<script>
 function toggle(classname) {
           var el = document.getElementsByClassName(classname);
           for(var i = 0; i < el.length; i++){
                      (el[i].style.display == 'none')
                      ? el[i].style.display = ''
                      : el[i].style.display = 'none';
           }
 }
</script>

cottton · 22. Oktober 2012

so ähnlich dacht ich mir das.
aber ich bekomme esnicht zum laufen: http://jsfiddle.net/rb7bn/69/
JS ist nicht mein freund ;D

Roland · 22. Oktober 2012

Ah Fehler entdeckt.
class darfst du nicht einfach so als variable verwenden das hat schon eine andere Bedeutung, also musst einfach nen anderen namen dir ausdenken, ich habe jetzt einfach mal classname genommen, geht^^

HTML

<!DOCTYPE html>
<html>




<head>
	<meta charset="UTF-8">
	<script>
function toggle(classname){
   	var el = document.getElementsByClassName(classname);
   	for(var i = 0; i < el.length; i++){
              (el[i].style.display == 'none')
              ? el[i].style.display = ''
              : el[i].style.display = 'none';
   }
}
	</script>
</head>




<body>
<div class="source">s1</div>
<div class="source">s2</div>
<div class="source">s3</div>
<input type="button" onclick="toggle('source')" name="toggle_button" value="toggle" />
</body>
</html>

Alles anzeigen

cottton · 23. Oktober 2012

YAY! WORKS!
Danke !!!
=)

Also ist "class" vordefiniert wie zB $this ?
... muss man ja erstmal wissen ;D

toggle .style.display (getElementsByClassName)

Jetzt mitmachen!

Teilen