|
|||
In ein div pro Wochentag etwas anderes einblenden
Hallo ich möchte gerne 7 <div id="montag"> dann <div id="dienstag"> usw. erstellen und über visibility:hidden verstecken. So das nur ein div mit dem Richtigen Wochentag angezeigt wird.
Kann mir da jemand auf die Sprünge helfen wie ich das ganze Realisieren kann. Über jquery oder muss doch javascript verwendet werden. Vielleicht kennt ja auch schon jemand fertige Codeschnipsel! |
Sponsored Links |
|
||||
Schön, wieder jemand der jQuery für etwas anderes als JavaScript hält?
jQuery == JavaScript. Datum prüfen, und je nachdem div anzeigen. Ansonsten mit PHP date() den Tag der Woche raussuchen und darstellen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
Hi,
danke für eure Hilfe! Ich würde das ganze jetzt so lösen: HTML-Code:
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DIV Inhalt austauschen!</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #wrapper { width: 1000px; } #morgen, #heute, #uebermorgen { width: 300px; height: auto; background-color: #D5CA62; border: #E00F13 solid 2px; } #heute { float: left; } #uebermorgen { float: right; } #morgen { margin: 0 auto; } h1 { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 150%; color: #69B719; } h2 { font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 120%; color:#666; } div, h2, h1 { padding:5px; } </style> </head> <body> <main> <header> <h1>Zum Speiseraum</h1> </header> <section id="wrapper"> <div id="heute"> <h2>Heute</h2> <div id="fall1"> <div>Tagessuppe</div> <div>Nudelsuppe</div> </div> <div id="fall2"> <div>Tagesessen</div> <div>Gulasch</div> </div> <div id="fall3"> <div>Preis</div> <div>13.50 €</div> </div> </div> <div id="uebermorgen"> <h2>Übermorgen</h2> <div id="fall1"> <div>Tagessuppe</div> <div>Kartoffelsuppe</div> </div> <div id="fall2"> <div>Tagesessen</div> <div>Sauerbraten</div> </div> <div id="fall3"> <div>Preis</div> <div>14.30 €</div> </div> </div> <div id="morgen"> <h2>Morgen</h2> <div id="fall1"> <div>Tagessuppe</div> <div>Linsensuppe</div> </div> <div id="fall2"> <div>Tagesessen</div> <div>Pfannkuchen</div> </div> <div id="fall3"> <div>Preis</div> <div>11,40 €</div> </div> </div> </section> <section> <!-- Add your site or application content here --> <p>Text bla bla bla!</p> </section> </main> <script type="text/javascript"> var jetzt = new Date(); var TagInWoche = jetzt.getDay(); var Wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); //console.log(Wochentag[TagInWoche]); switch (Wochentag[TagInWoche]) { case "Sonntag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Rinderbrühe"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Eintopf"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "13.30€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Ochsenschwanzsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Tintenfisch"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.50€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Grießsuppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Gebeizter Lachs"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.20€"; break; case "Samstag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Steinpilzsuppe"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Linsen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "12.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Hühnerbrühe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Maultaschen"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.80€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Grießklößchen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Pizza"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.20€"; break; case "Freitag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Karottensuppe"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; case "Donnerstag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Donnerstag"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; case "Mittwoch": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Mittwoch"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; case "Dienstag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Dienstag"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; case "Montag": document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Monta"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; default: document.querySelector('#heute #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#heute #fall1').getElementsByTagName('div').item(1).innerHTML = "Default"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#heute #fall2').getElementsByTagName('div').item(1).innerHTML = "Schwäbische Maultaschen"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#heute #fall3').getElementsByTagName('div').item(1).innerHTML = "11.80€"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#morgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Nudelsuppe"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#morgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Carpaccio vom Rind"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#morgen #fall3').getElementsByTagName('div').item(1).innerHTML = "12.90€"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(0).innerHTML = "Tagessuppe"; document.querySelector('#uebermorgen #fall1').getElementsByTagName('div').item(1).innerHTML = "Kokos Suppe"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(0).innerHTML = "Tagesessen"; document.querySelector('#uebermorgen #fall2').getElementsByTagName('div').item(1).innerHTML = "Nudelsalt"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(0).innerHTML = "Preis"; document.querySelector('#uebermorgen #fall3').getElementsByTagName('div').item(1).innerHTML = "10.10€"; break; } </script> </body> </html> Und funktioniert dies den auch auf den meisten Browsern? Wie kann ich den abfangen wenn kein Javascript aktiviert ist um z.B. den ganzen aüßern div auszublenden? |
|
|||
Zitat:
Du sagst es ja auch selber: jQuery ist eine Javascript-Bibliothek. Da steckt zu 100% Javascript drinnen und es ist trotzdem "nur" Javascript. Das musste mal gesagt werden, nicht, dass den Schwachsinn hier noch wer glaubt. Zu dem eigentlichen Problem: Deine Lösung ist zwar nicht schön, aber funktional. Sofern du damit leben kannst, dann kannst du es natürlich so lassen. Es wird nur schwerer (bzw. mühsamer) werden, Änderungen an dem Code durchzuführen. Ein Hinweis: IDs dürfen nur einmal im Code vorkommen, also sind Selektoren wie "#heute #fall1" unsinnig, #fall1 alleine reicht aus. Auch kannst du Elemente in Variablen speichern, wie zB var heuteDiv = document.querySelector('#heute'); dann kannst du mit heuteDiv.getElementsByTagName('div') auf die div innerhalb zugreifen, das würde den code eventuell lesbarer machen. Auch kannst du ruhig Überschriften und Absätze verwenden und nicht nur bedeutungslose divs. |
|
||||
Zitat:
@neuland Du darfst IDs nur einmal im Dokument verwenden, deine Fälle dürfen also nicht die gleichen IDs haben. getElementsByTagName kannst du dir eigentlich sparen, das kann querySelector bzw. dann eher querySelectorAll auch. Besser wäre es hier, wenn du den einzelnen Element passende Klassen (oder data-Attribute) gibst und sie darüber selektierst, dann wirde dein Code auch sehr viel einfacher. Statt dem riesigen switch/case könntest du die Daten auch in ein Objekt schreiben und dann in einer Schleife durchlaufen, das wäre einfacher zu pflegen. |
|
|||
Zitat:
Man kann in mootools nur nicht von Haus aus die jQuery Befehle nutzen, man könnte sie aber problemlos einbauen. Eben weil beides javascript ist. Da dürfte man auch nicht sagen, dass Palatschinken kein essen ist, weil ein Kaiserschmarren ist ja auch nichts zum essen, weil dann wären Palatschinken = Kaiserschmarren. Insofern ist es korrekt, wenn man sagt, dass jquery auch "nur" javascript ist. Aber nicht jedes javascript ist jquery. Ansonsten hast du natürlich Recht, das mit den doppelten IDs habe ich beim ersten drüberschauen in der Eile übersehen. Dass hier noch einiges schöner schreiben kann ist klar, aber falls es dem Threadersteller so reicht kann er es auch verwenden. Wenn er die nächsten 10 Jahre nichts an dem Code ändern muss dann will ich ihn dabei nicht aufhalten. Auch sieht es nicht so aus, als ob der code wirklich performant und optimiert sein soll. |
|
||||
Zu sagen, dass jQuery auch Javascript ist, damit habe ich kein Problem. Wenn man es aber gleichsetzt impliziert das auch, dass du damit geschriebene Skripte wechselseitig nutzen kannst und das ist falsch. Ich habe schon so oft erlebt, dass die Leute einfach den Unterschied zwischen jQuery und Javascript nicht kennen und solche Gleichsetzungen begünstigen eine falsche Wahrnehmung. Man kann ein jQuery-Skript eben nicht überall ausführen wo Javascript zur Verfügung steht, umgekehrt ist das prinzipiell immer möglich.
Dein Vergleich hinkt natürlich gewaltig, da Palatschinken und Kaiserschmarren nicht aus Essen gemacht, sondern nur als solches bezeichnet werden. |
|
|||
Hi danke nochmal für eure Hilfe!
Sorry das ich eine Diskussion wegen Javascript und JQuery in Gang gebracht habe. Nach eurer Erklärung verstehe ich das ganze jetzt so: Javascript wird mit dem Browser zuverfügung gestellt. jQuery ist eine Sammlung von in Javascript geschrieben Funktion und Methoden. Deshalb muss auch die Richtige jQuery Version eingebunden werden. Hoffe das dies so einigermaßen stimmt Ich habe nun versucht mit den letzten Tipps das ganze anders zu lösen: HTML-Code:
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DIV Inhalt austauschen!</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #wrapper { width: 1000px; } #morgen, #heute, #uebermorgen { width: 300px; height: auto; background-color: #D5CA62; border: #E00F13 solid 2px; } #heute { float: left; } #uebermorgen { float: right; } #morgen { margin: 0 auto; } h1 { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 150%; color: #69B719; } h2 { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 120%; color: #666; } div, h2, h1 { padding: 5px; } </style> </head> <body> <main> <header> <h1>Zum Speiseraum</h1> </header> <section id="wrapper"> <div id="heute"> <h2>Heute</h2> <div> <div>Tagessuppe</div> <div>Nudelsuppe</div> </div> <div> <div>Tagesessen</div> <div>Gulasch</div> </div> <div> <div>Preis</div> <div>13.50 €</div> </div> </div> <div id="uebermorgen"> <h2>Übermorgen</h2> <div> <div>Tagessuppe</div> <div>Kartoffelsuppe</div> </div> <div> <div>Tagesessen</div> <div>Sauerbraten</div> </div> <div> <div>Preis</div> <div>14.30 €</div> </div> </div> <div id="morgen"> <h2>Morgen</h2> <div> <div>Tagessuppe</div> <div>Linsensuppe</div> </div> <div> <div>Tagesessen</div> <div>Pfannkuchen</div> </div> <div> <div>Preis</div> <div>11,40 €</div> </div> </div> </section> <section> <!-- Add your site or application content here --> <p>Text bla bla bla!</p> </section> </main> <script type="text/javascript"> var jetzt = new Date(); var TagInWoche = jetzt.getDay(); var Wochentag = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var heuteDiv = document.querySelector('#heute'); var morgenDiv = document.querySelector('#morgen'); var uebermorgenDiv = document.querySelector('#uebermorgen'); var montagMenu = new Object(); var dienstagMenu = new Object(); var mittwochMenu = new Object(); var donnerstagMenu = new Object(); var freitagMenu = new Object(); var samtagMenu = new Object(); var sonntagMenu = new Object(); // Montagsmenu montagMenu.tagessuppe = "Fleischbrühe1"; montagMenu.tagesessen = "Gulasch1"; montagMenu.tagespreis = "12,10 Euro"; // Dienstagsmenu dienstagMenu.tagessuppe = "Fleischbrühe2"; dienstagMenu.tagesessen = "Gulasch2"; dienstagMenu.tagespreis = "12,20 Euro"; // Mittwochsmenu mittwochMenu.tagessuppe = "Fleischbrühe3"; mittwochMenu.tageessen = "Gulasch3"; mittwochMenu.tagespreis = "12,30 Euro"; // Donnerstagsmenu donnerstagMenu.tagessuppe = "Fleischbrühe4"; donnerstagMenu.tagesessen = "Gulasch4"; donnerstagMenu.tagespreis = "12,40 Euro"; // Freitagsmenu freitagMenu.tagessuppe = "Fleischbrühe5"; freitagMenu.tagesessen = "Gulasch5"; freitagMenu.tagespreis = "12,50 Euro"; // Samstagsmenu samtagMenu.tagessuppe = "Fleischbrühe6"; samtagMenu.tagesessen = "Gulasch6"; samtagMenu.tagespreis = "12,60 Euro"; // Sonntagssmenu sonntagMenu.tagessuppe = "Fleischbrühe7"; sonntagMenu.tagesessen = "Gulasch7"; sonntagMenu.tagespreis = "12,70 Euro"; if (Wochentag[TagInWoche] == "Montag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = montagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = montagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = montagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = dienstagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = dienstagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = dienstagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = mittwochMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = mittwochMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = mittwochMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Dienstag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = dienstagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = dienstagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = dienstagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = mittwochMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = mittwochMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = mittwochMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = donnerstagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = donnerstagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = donnerstagMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Mitwoch") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = mittwochMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = mittwochMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = mittwochMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = donnerstagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = donnerstagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = donnerstagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = donnerstagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = donnerstagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = donnerstagMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Donnerstag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = donnerstagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = donnerstagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = donnerstagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = freitagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = freitagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = freitagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = samtagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = samtagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = samtagMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Freistag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = freitagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = freitagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = freitagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = samtagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = samtagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = samtagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = sonntagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = sonntagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = sonntagMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Samstag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = samtagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = samtagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = samtagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = sonntagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = sonntagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = sonntagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = montagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = montagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = montagMenu.tagespreis; } else if (Wochentag[TagInWoche] == "Sonnstag") { heuteDiv.getElementsByTagName('div').item(2).innerHTML = sonntagMenu.tagessuppe; heuteDiv.getElementsByTagName('div').item(5).innerHTML = sonntagMenu.tagesessen; heuteDiv.getElementsByTagName('div').item(8).innerHTML = sonntagMenu.tagespreis; morgenDiv.getElementsByTagName('div').item(2).innerHTML = montagMenu.tagessuppe; morgenDiv.getElementsByTagName('div').item(5).innerHTML = montagMenu.tagesessen; morgenDiv.getElementsByTagName('div').item(8).innerHTML = montagMenu.tagespreis; uebermorgenDiv.getElementsByTagName('div').item(2).innerHTML = dienstagMenu.tagessuppe; uebermorgenDiv.getElementsByTagName('div').item(5).innerHTML = dienstagMenu.tagesessen; uebermorgenDiv.getElementsByTagName('div').item(8).innerHTML = dienstagMenu.tagespreis; } //console.log(Wochentag[TagInWoche]); //alert(Wochentag); </script> </body> </html> Aber ob dies Perfomanter ist, keine Ahnung. Wenn ihr Tipps habt wie ich das noch besser lösen könnte, bin für alle Tipps dankbar. Nur wie soll ich dies für einen Endanwender Pflegbar machen? |
Sponsored Links |
|
||||
Zitat:
Ich würde dir empfehlen grundsätzlich Literale zu schreiben, also statt „new Object()“ einfach „{}“ und statt „new Array()“ nur „[]“, das ist einfach kürzer, besser lesbar und üblich. Spätestens bei Strings und Numbers sind die beiden Varianten nicht mehr äquivalent nutzbar (typeof 'foo'; ist „string“ aber typeof new String('foo'); ist „object“). Bei der Namensvergabe ist es üblich alles in Englisch zu halten. Variablen werden üblicher Weise klein begonnen, es sei denn sie beinhalten einen Konstruktor. Letztendlich ist es natürlich deine Entscheidung wie du das handhaben möchtest. Ich habe dir mal ein Beispiel gemacht wie ich das auf die Schnelle umsetzen würde: HTML-Code:
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DIV Inhalt austauschen!</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #wrapper { width: 1000px; } #morgen, #heute, #uebermorgen { width: 300px; height: auto; background-color: #D5CA62; border: #E00F13 solid 2px; } #heute { float: left; } #uebermorgen { float: right; } #morgen { margin: 0 auto; } h1 { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 150%; color: #69B719; } h2 { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 120%; color: #666; } div, h2, h1 { padding: 5px; } </style> </head> <body> <main> <header> <h1>Zum Speiseraum</h1> </header> <section id="wrapper"> <div id="heute"> <h2>Heute</h2> <div> <div>Tagessuppe</div> <div class="soup">Nudelsuppe</div> </div> <div> <div>Tagesessen</div> <div class="dish">Gulasch</div> </div> <div> <div>Preis</div> <div class="price">13.50 €</div> </div> </div> <div id="uebermorgen"> <h2>Übermorgen</h2> <div> <div>Tagessuppe</div> <div class="soup">Kartoffelsuppe</div> </div> <div> <div>Tagesessen</div> <div class="dish">Sauerbraten</div> </div> <div> <div>Preis</div> <div class="price">14.30 €</div> </div> </div> <div id="morgen"> <h2>Morgen</h2> <div> <div>Tagessuppe</div> <div class="soup">Linsensuppe</div> </div> <div> <div>Tagesessen</div> <div class="dish">Pfannkuchen</div> </div> <div> <div>Preis</div> <div class="price">11,40 €</div> </div> </div> </section> <section> <!-- Add your site or application content here --> <p>Text bla bla bla!</p> </section> </main> <script type="text/javascript"> var now = new Date(); var currentWeekdayNumber = now.getDay(); var weekday = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; var today = document.querySelector('#heute'); var tomorrow = document.querySelector('#morgen'); var tdat = document.querySelector('#uebermorgen'); var menu = [ { tagessuppe: 'Fleischbrühe1', tagesessen: 'Gulasch1', tagespreis: '12,10 Euro' }, { tagessuppe: 'Fleischbrühe2', tagesessen: 'Gulasch2', tagespreis: '12,20 Euro' }, { tagessuppe: 'Fleischbrühe3', tagesessen: 'Gulasch3', tagespreis: '12,30 Euro' }, { tagessuppe: 'Fleischbrühe4', tagesessen: 'Gulasch4', tagespreis: '12,40 Euro' }, { tagessuppe: 'Fleischbrühe5', tagesessen: 'Gulasch5', tagespreis: '12,50 Euro' }, { tagessuppe: 'Fleischbrühe6', tagesessen: 'Gulasch6', tagespreis: '12,60 Euro' }, { tagessuppe: 'Fleischbrühe7', tagesessen: 'Gulasch7', tagespreis: '12,70 Euro' } ]; function showDish(div, weekDayNumber) { // sicherstellen, dass der wochentag kleiner oder gleich 7 ist weekDayNumber = (weekDayNumber <= 7) ? weekDayNumber : weekDayNumber % 7; var data = menu[weekDayNumber - 1]; div.querySelector('.soup').innerHTML = data.tagessuppe; div.querySelector('.dish').innerHTML = data.tagesessen; div.querySelector('.price').innerHTML = data.tagespreis; } // heute showDish(today, currentWeekdayNumber); // morgen showDish(tomorrow, currentWeekdayNumber + 1); // übermorgen showDish(tdat, currentWeekdayNumber + 2); </script> </body> </html> Den Inhalt der Variablen „menu“ könnte man zum Beispiel auch in eine externe Datei auslagern (Javascript oder JSON) und die dann einbinden bzw. per Ajax nachladen. PS: Wozu brauchst du die Namen der Wochentage? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bei Mouse-Over anderes Bild einblenden (Class faden!) | plums | Javascript & Ajax | 15 | 04.06.2011 19:41 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Div Wight Auto???? | temp11 | CSS | 8 | 30.06.2009 13:34 |
innerhalb eines Div ein anderes unten positionieren | imported_daniel | CSS | 2 | 11.03.2004 19:02 |
höhe eines div tag an ein anderes anpassen | ffr | CSS | 4 | 09.12.2003 17:59 |