[JS] ElementGetByClass

Fipsi · 24. Dezember 2012, 12:52

Hallo zusammen,

jetzt hab ich zur Abwechslung mal wieder ein JacaScript-Problem.

Folgendes:
Aus einer Datenbank werden gruppen ausgelesen. Am Anfang stehen dann nur die Gruppennamen (in einer Tabelle) da. Klickt man auf einen Gruppennamen, so gehen drunter Zeilen auf, in denen Einstellungsmöglichkeiten sind.
Jetzt aber folgendes Problem:
Die Zeilen sind über die <tr>-Tags eingeteilt. Und in diesen <tr>-Tags sind auch die id's definiert.

Der JS-Code dazu sieht so aus:

Quellcode

<script type="text/javascript">
function spoil(id)
{
if (document.getElementById)
{
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
}
}
</script>

Wenn ich jetzt zwei solche <tr>-Zeilen habe, dann wird aber nur eine davon angezeigt. Gibt es was a la ElementGetByClass, dass der dann alles Zeilen anzeigt?

Danke schonmal

Fipsi

Exi · 24. Dezember 2012, 13:01

Laut Mozilla kann Firefox das und einige andere Browser auch schon.

Siehe hier: document.getElementsByClassName

Ich hoffe du meins das damit

Fipsi · 24. Dezember 2012, 13:10

Ich hab Firefox und irgendwie will des ned so ganz funzen.. ich muss doch im JS-Code nur des ElementGetById in ElementGetByClassName und im html des id mit class tauschen, oder?

Exi · 24. Dezember 2012, 13:17

Theoretisch ja..

Wirft die Fehlerkonsole irgendwas?

Fipsi · 24. Dezember 2012, 13:18

Ne.. nix, was ich seh jedenfalls
Es wird mir genau des selbe angezeit, als würd ich nur mit ElementGetById - ohne dass ich draufgeklickt hab - die seite laden

Exi · 24. Dezember 2012, 13:20

Wenn du mehrere Treffer hast musst du das auch per Schleife durchlaufen wenn ich mich nicht täusche

Fipsi · 24. Dezember 2012, 13:23

Ich hab ka.. mit JS hab ich bisher noch nicht viel am Hut.. sind eig. alle Code's irgendwoe rauskopiert (zwei an der Zahl :D).
kannst du mir bitte schnell die Schleife programmieren?

Exi · 24. Dezember 2012, 13:30

Also man kann hierzu auch ganz normal das document.getElementById nehmen.

Hierzu aber nich allen die gleiche ID geben sondern "Sub-IDs" nutzen.

Also "id_1", "id_2", "id_3", "id_..."....

Die Javascriptfunktion dazu wäre (ich gehe hierbei von 3 Zeilen aus, sollte die Anzahl variable sein muss man das eben modifizieren):

Quellcode

function spoil(id) {
for(i = 1; i <= 3; i++) {
var divid = document.getElementById(id + "_" + i);
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}

Hierbei wird jetzt einfach jedes Element mit der "Sub-ID" gesetzt.. Ich hoffe verständlich und es ist ungetestet!

Fipsi · 24. Dezember 2012, 13:37

Hab gerade eingebaut und das Script angepasst, funzt nich.. Nochmal angeschaut, was überarbeitet, funzt immernoch nich.. nochmla angeschaut: Man sollte vllt. die <tr>-Tags von class wieder auf id ändern *facepalm*.

Danke, funktioniert jetzt. Super

Fipsi · 24. Dezember 2012, 21:30

So, jetzt hab ich aber noch schnell eine Layout-Frage dazu:

Wie schon erwähnt hab ich das über eine Tabelle gemacht. Ich hab zwei Spalten. Die erste Spalte ist immer unterschiedlich lang. Wenn ich jetzt allerdings mir diese Zeilen anzeigen lass, dann sind das nicht wirklich zwei Spalten, sondern klebt wirklich direkt aneinander. Wie kann ich das ändern?

Exi · 25. Dezember 2012, 13:51

Ich würde mal sagen das liegt am display: block.

Tabellenzeilen etc. haben andere display - Varianten siehe hier: css4you - display

Ich denke bei dir sollte dann "table-row" funktionieren.

Fipsi · 25. Dezember 2012, 15:37

Ah.. so ne Seite gibts also doch! Ich hab die schon so oft und lange gesucht, aber nie was ähnliches gefunden. Vielen, vielen Dank!!

P.S.: Hat funktioniert =)

Exi · 25. Dezember 2012, 19:02

Solltest nur aufpassen mit der Seite da sie anscheinend nicht mehr gepflegt wird

Fipsi · 25. Dezember 2012, 20:10

Mh.. kay.. na ja, seh ich ja dann, was funktioniert und was nicht

Danke

Bodo06 · 28. Dezember 2012, 23:04

N'Abend!

Darf ich anmerken, dass die vorgeschlagene Methode über iterative IDs undynamisch ist?
Fipsi, du solltest dir die Möglichkeit mit getElementsByClassName nochmal anschauen.

Falls du Zweifel hast, ob deine Browser die Funktion unterstützen: caniuse.com/getelementsbyclassname
Achte auch darauf, dass du die Funktion korrekt schreibst. Im Gegensatz zu getElementById ist in getElementsByClassName ein s mehr drin.

Beispiel:

Quellcode

<table>
<tr class="openlink">
<td>
<a href="#" onClick="spoil('groupA');">Open Group A</a>
</td>
</tr>
<tr class="spoil groupA">
<td>If I am readable, row 1 of group A has spoiled.</td>
</tr>
<tr class="spoil groupA">
<td>If I am readable, row 2 of group A has spoiled.</td>
</tr>
<tr class="spoil groupA">
<td>If I am readable, row 3 of group A has spoiled.</td>
</tr>
<tr class="openlink">
<td>
<a href="#" onClick="spoil('groupB');">Open Group B</a>
</td>
</tr>
<tr class="spoil groupB">
<td>If I am readable, row 1 of group B has spoiled.</td>
</tr>
<tr class="spoil groupB">
<td>If I am readable, row 2 of group B has spoiled.</td>
</tr>
<tr class="spoil groupB">
<td>If I am readable, row 3 of group B has spoiled.</td>
</tr>
</table>

Alles anzeigen

Quellcode

function spoil(className) {
var elements = document.getElementsByClassName(className);
for(var i=0; i<elements.length; i++){
elements[i].style.display = (elements[i].style.display=='block'?'none':'block');
}
}

Code ist getestet im aktuellsten Chrome und ist im Anhang.

Viel Erfolg und liebe Grüße
Bodo06

[JS] ElementGetByClass

[JS] ElementGetByClass

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1