XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   In ein div pro Wochentag etwas anderes einblenden (http://xhtmlforum.de/showthread.php?t=71322)

neuland 19.09.2014 18:01

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. :shock::?:

Vielleicht kennt ja auch schon jemand fertige Codeschnipsel!

Thielo 19.09.2014 23:45

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.

inta 20.09.2014 00:52

Och nö, bitte nicht jQuery mit Javascript gleichsetzen, das ist schlicht falsch und trägt nicht gerade zu Aufklärung bei. jQuery ist nur eine von vielen Javascript-Bibliotheken.


Zu dem Wochentagproblem, schau dir das Date-Objekt von Javascript an. Eventuell ist es auch sinnvoller gleich den richtigen Tag in dein Div zu schreiben und nicht alle im Code stehen zu haben.

neuland 20.09.2014 16:18

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>

Sieht vermutlich nicht so elegant aus, gibt es den eine bessere Lösung?

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?

cloned 22.09.2014 09:09

Zitat:

Zitat von inta (Beitrag 541276)
Och nö, bitte nicht jQuery mit Javascript gleichsetzen, das ist schlicht falsch und trägt nicht gerade zu Aufklärung bei. jQuery ist nur eine von vielen Javascript-Bibliotheken.

Natürlich ist jquery mit Javascript gleichzusetzen. Alles, was jquery kann, kann auch mit javascript umgesetzt werden (und umgekehrt)
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.

inta 22.09.2014 10:57

Zitat:

Zitat von cloned (Beitrag 541300)
Das musste mal gesagt werden, nicht, dass den Schwachsinn hier noch wer glaubt.

Der „Schwachsinn“ ist schlicht die Wahrheit und was du schreibst kompletter Käse. Natürlich ist jQuery in Javascript geschrieben, aber keinesfalls damit gleichzusetzen, sonst wäre auch jQuery == MooTools == Dojo == AngularJS == Mithril korrekt und das ist einfach nur Quatsch.


@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.

cloned 22.09.2014 11:22

Zitat:

Zitat von inta (Beitrag 541302)
Der „Schwachsinn“ ist schlicht die Wahrheit und was du schreibst kompletter Käse. Natürlich ist jQuery in Javascript geschrieben, aber keinesfalls damit gleichzusetzen, sonst wäre auch jQuery == MooTools == Dojo == AngularJS == Mithril korrekt und das ist einfach nur Quatsch.

Du verwechselst hier etwas im deutschen Sprachgebrauch. Nur weil jQuery = Javascript ist heißt das noch lange nicht, dass mootools = jQuery ist. mootools ist aber auch javascript, da hast du Recht.
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.

inta 22.09.2014 11:53

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.

neuland 25.09.2014 23:14

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 :shock:

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 :idea: dankbar.

Nur wie soll ich dies für einen Endanwender Pflegbar machen? :roll:

inta 26.09.2014 11:14

Zitat:

Zitat von neuland (Beitrag 541333)
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 :shock:

Das hast du richtig verstanden.


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>

Blickst du da durch? Ich finde es sehr viel einfacher zu lesen und vor allem zu pflegen.

Zitat:

Zitat von neuland (Beitrag 541333)
Nur wie soll ich dies für einen Endanwender Pflegbar machen? :roll:

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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023