Innerhalb von php-while-schleife datensatz mit javascritp

[Felix Riesterer]

Lieber Simon P.,

es wäre sinnvoll, die weiteren Angaben innerhalb Deines <li>-Elements zu verpacken. Mit CSS (und völlig ohne JavaScript) kannst Du dann die :hover-Pseudoklasse nutzen, um diese Zusatzinformationen anzeigen zu lassen.

1. Allgemeine Frage:
      Die Datensätze die ich mit Hilfe der "while-schleife" auslese, kann ich doch nur innerhalb dieser schleife anpassen, da ich doch sonst (wenn ich die Datensätze einzelnd ansprechen würde) keine Datenbank mehr bräuchte.

Es wäre auch möglich innerhalb der Schleife die Daten in ein Array zu schreiben und anschließend dieses in einer anderen Schleife zu verarbeiten. Das macht man wohl, wenn man die Datenstruktur (DB) von der Präsentation (HTML) abstrahieren will, und das Array einfach einer Template-Maschine in den Rachen wirft. Für Deinen Anwendungsfall sieht es aber tatsächlich so aus, als wäre es beim Abfragen der Datenbank am geschicktesten, das Markup gleich zu generieren.

Wie kann ich also innerhalb meiner PHP-Schleife, die Datensätze mit hilfe css bzw. html ansprechen?

Du kannst Markup (HTML-Code) generieren, um es an den Browser zu senden. CSS und JavaScript erledigt dann der Browser. Da kann PHP sinnvollerweise nicht "mitreden".

2. Nun zu meinem speziellen Fall:
   echo
   '<li>' ."$row->Name". '</li>' ?>
   <p>
   <a href="#" onclick="toggleElementDisplay("box");">Click me!</a>
   <div id="box" style="border: 1px solid #000000; display: none;">'
        <?php
        echo "$row->ID";
        ?>
   </div>
   </p>

Das bedeutet, dass Dein Dokument im Mittelteil etwa so aussieht?

<ul>  
    <li>Name 1</li>  
    <p>  
        <a href="#" onclick="toggleElementDisplay("box");">Click me!</a>  
        <div id="box" style="border: 1px solid #000000; display: none;">  
            ID 1  
        </div>  
    </p>  
    <li>Name 2</li>  
    <p>  
        <a href="#" onclick="toggleElementDisplay("box");">Click me!</a>  
        <div id="box" style="border: 1px solid #000000; display: none;">  
            ID 2  
        </div>  
    </p>  
    <li>Name 3</li>  
    <p>  
        <a href="#" onclick="toggleElementDisplay("box");">Click me!</a>  
        <div id="box" style="border: 1px solid #000000; display: none;">  
            ID 3  
        </div>  
    </p>  
</ul>

Da stellen sich mir die Haare zu Berge! Du erzeugst ungültiges Markup!

1.) <ul>- und <ol>-Elemente dürfen ausschließlich <li>-Elemente als Kindelemente haben, keinesfalls jedoch <p>-Elemente!

2.) Es ist nicht sinnvoll, innerhalb eines <p>-Elementes ein (oder mehrere) <div>-Element(e) zu verwenden. Besser <span>, <em>, <strong> oder <b>/<i>, denn in einem <p>-Element sollten laut Sezifikation (soweit ich mich erinnere) nur inline-Elemente stehen.

3.) Eine ID darf dokumentweit nur ein einziges Mal vorkommen. Du aber verwendest die ID "box" mehrfach. Das ist entgegen der Spezifikation!

4.) Dein Markup enthält nicht nur Markup (HTML), sondern auch JavaScript (alles mit dem "onclick"-Attribut zusammenhängende) und CSS ("style"-Attribut). Das solltest Du unbedingt als "schlechten Stil" vermeiden!

Besser so:

<ul id="boxes">  
    <li>  
        Name 1  
        <span>ID 1</span>  
    </li>  
    <li>  
        Name 2  
        <span>ID 2</span>  
    </li>  
    <li>  
        Name 3  
        <span>ID 3</span>  
    </li>  
</ul>

Dein CSS sollte dann folgendes enthalten:

#boxes li span{  
    display: none;  
}  
  
#boxes li:hover span {  
    display: block;  
    position: absolute;  
}

Du kannst natürlich noch viel mehr an Eigenschaften definieren, aber mit diesen beiden Rulesets erhältst Du den Hover-Effekt völlig ohne JavaScript.

5.) <a href="#" onclick="toggleElementDisplay("box");">Click me!</a> ist kaputter Code, da der Attributwert für "onclick" nach der öffnenden runden Klammer zuende ist. das "box" wäre schon der Name des nächsten Attributes, welches aber mangels Istgleichzeichen nicht als solches korrekt erkannt werden kann bzw. je nach Fehlerkorrektur des Browsers als "ohne Wert" interpretiert wird.

Korrekterweise hättest Du (ungeachtet des schon bemängelten Stils) folgendes notieren müssen (beachte die einfachen Anführungszeichen und die korrekte Einfärbung):

<a href="#" onclick="toggleElementDisplay('box');">Click me!</a>

Solche Syntaxfehler finden sich am leichtesten, wenn man einen Editor mit Syntaxhighlighting benutzt. Womit arbeitest Du?

Liebe Grüße,

Felix Riesterer.