mehrere Div's auf einmal schließen

Kalito

Erfahrenes Mitglied
wenn ich mehrer divs hatte, habe ich bisher die sichbarkeit bzw unsichtbarkeit so geregelt:

HTML:
<script language="JavaScript" type="text/javascript">
function CheckRadio(){
if (document.getElementById('eins').checked==true)
      {
        document.getElementById('1').style.display = 'block';
        document.getElementById('2').style.display = 'none';
        document.getElementById('3').style.display = 'none';
      }
if (document.getElementById('zwei').checked==true)
      {
        document.getElementById('1').style.display = 'none';
        document.getElementById('2').style.display = 'block';
        document.getElementById('3').style.display = 'none';
      }
if (document.getElementById('eins').checked==true)
      {
        document.getElementById('1').style.display = 'none';
        document.getElementById('2').style.display = 'none';
        document.getElementById('3').style.display = 'block';
      }
}
</script>

<ul>
       <li><imput type="radio" id="eins" onclick="javascript:CheckRadio('1');" checked="checked"/>1</li>
        <li><imput type="radio" id="zwei" onclick="javascript:CheckRadio('2');" />2</li>
        <li><imput type="radio" id="drei" onclick="javascript:CheckRadio('3');" />3</li>
</ul>

     <div id="1" style="display: block;">1</div>
     <div id="2" style="display: none;">2</div>
     <div id="3" style="display: none;">3</div>

Dies ist nur ein Beispielcode, aber verdeutlicht mein Problem.

Gerne wollte ich meine Seite dynamischer gestalten und alles über eine Datenbank verwalten

PHP:
<ul>
<?php
         $r = mysql_query("Select * FROM nummer");
                  while($nummer = mysql_fetch_array($r)){
                            echo'<li><input type="radio" id="nu'.$nummer['id'].'"  onclick="javascript: if (document.getElementById(\'nu'.$nummer['id'].'\').checked==true);" />'.$nummer['name'].'</li>';
                                        }
                                 ?>
                            </ul>

<?php
        for($i=1;$i<mysql_num_rows($r)+1;$i++){
             echo '<div id="n'.$i.'">
                          hallo
                        </div>
                        ';
             }
                                 ?>


Wie kann ich nun den Javascriptteil mit der function Checkradio so dynamisch gestalten, das ich nicht hundert if bestimmen muss bzw. das es dynamischer wird
 
Zuletzt bearbeitet:

tombe

Erfahrenes Mitglied
Du kannst den maximalen Wert der ID entweder in eine global gültige JavaScript Variable oder ein verstecktes Textfeld schreiben.

Diesen Wert nimmst du dann und arbeitest mit einer FOR/NEXT-Schleife.
 

Kalito

Erfahrenes Mitglied
Und wie kann ich das dann nutzen?

etwa so?:eek:
Code:
s = ""
for i = 1 to 5
  if(i==true) style="display:block;"
  else style="display:none;"
next

ich glaube nicht :rolleyes:
 

tombe

Erfahrenes Mitglied
Also vereinfacht dachte ich schon das es in etwa so gehen sollte:

Java:
<script language="JavaScript" type="text/javascript">
var gesamt = <?php echo $anzahl_div; ?>
function XYZ () {

for (zaehler = 1 to gesamt) {
    if (document.getElementById(zaehler).checked==true) {
        document.getElementById('1').style.display = 'none';
        document.getElementById('2').style.display = 'none';
        document.getElementById('3').style.display = 'block';
    }
}

}

gesamt bekommt dann die Anzahl der DIV´s
 

Kalito

Erfahrenes Mitglied
Kann sein, das ich das jetzt falsch lese, wird aber bei der Schleife die 3 immer auf block gesetzt?
 

tombe

Erfahrenes Mitglied
Ja, das war noch nicht so das Gelbe vom Ei. Hier die Version 2:


PHP:
<?php
$db = @mysql_connect("localhost", "root", "");
mysql_select_db("DEINE_DATENBANK", $db);
$r = mysql_query("SELECT * FROM DEINE_TABELLE");
$anzahl = mysql_num_rows($r);
?>

<script language="JavaScript" type="text/javascript">
var gesamt = <?php echo $anzahl; ?>;
function anzeigen (zaehler) {

for (zaehler = 1; zaehler <= gesamt; zaehler++) {
    if (document.getElementById(zaehler).checked == true) {
        document.getElementById('div' + zaehler).style.display = 'none';
    } else if (document.getElementById(zaehler).checked == false) {
		document.getElementById('div' + zaehler).style.display = 'block';
	}
}

}
</script>

<ul>
<?php
$a = 0;
while($nummer = mysql_fetch_array($r)){
	$a++;
	echo '<li><input type="radio" id="'.$a .'" onclick="anzeigen(' .$a .')" name="op"/>'.$a.'</li>';
}
?>
</ul>

<?php
for ($i = 1; $i < mysql_num_rows($r) + 1; $i++){
	echo '<div id="div'.$i.'"> hallo ' .$i .'</div>';
}
?>

Die Optionsfelder bekommen hier eine numerische ID die dann an die Funktion übergeben wird. Die DIVs bekommen als ID die Bezeichnung "div" zusammen mit der entsprechenden Zahl.

Wird jetzt die Funktion z.B. mit der Parameter 3 aufgerufen, dann wird das DIV mit der ID "div3" aus- und alle anderen eingeblendet.

Das müsste es doch sein was du haben wolltest!?
 

Kalito

Erfahrenes Mitglied
Du hattes nen kleinen Dreher drinnen :)

Hab es nochmal bissel umgebaut, aber eine kleine Frage habe ich noch.

Ich möchte gerne, das am anfang nur div 1 auf block gesetzt ist. Hab es bisher so gelöst:

PHP:
ul>
<?php
$a = 0;
while($nummer = mysql_fetch_array($r)){
    $a++;
    if($a == 1) echo '<li><input type="radio" id="'.$a .'" onclick="anzeigen(' .$a .')" name="op" checked="checked"/>'.$a.'</li>';
    else echo '<li><input type="radio" id="'.$a .'" onclick="anzeigen(' .$a .')" name="op"/>'.$a.'</li>';
}
?>
</ul>

<?php
echo '<div id="div1" style="display: block;"> hallo 1 </div>';
for ($i = 2; $i < mysql_num_rows($r) + 1; $i++){
    echo '<div id="div'.$i.'" style="display: none;"> hallo ' .$i .'</div>';
}
?>

wäre das so ok oder kann man das auch noch verbessern?
 
Zuletzt bearbeitet: