HTML and CSS Reference
In-Depth Information
Um den aktuellen Inhalt der Gerichteliste zu leeren, genügt folgender Code:
$('#gerichteliste').empty();
Als Nächstes lesen Sie die JSON-Datei
gerichte.json
via
$.getJSON
aus:
$.getJSON('gerichte.json', function(data) {
});
Innerhalb dieses Aufrufs gehen Sie nun mit
$.each
jeden Eintrag des Objekts
gerichte
durch. Die Bezeichnung
data.gerichte
wird dabei als Variable
item
gespeichert:
8
$.each(data.gerichte, function(i,item){
});
Nun heißt es, die einzelnen Daten der JSON-Datei an den richtigen Stellen einzufü-
gen und dann der Liste mit der
id
gerichteliste
hinzuzufügen. Dies erreichen Sie
mit
appendTo
. Dabei definieren Sie zunächst, was eingefügt werden soll, und anschlie-
ßend, in welches HTML-Element. Der einzufügende Teil besteht dabei aus folgenden
Teilen:
<li></li>
Über das
li
-Element definieren Sie einen Listeneintrag.
<a href="gericht-detail.html" data-transition="slide"
onClick="javascript:sessionStorage.gericht=\''+item.name+'\';"></a>
Wenn der Benutzer einen Listeneintrag auswählt, soll sich die Unterseite
gericht-
detail.html
öffnen. Neben dem bereits bekannten
data-transition
-Attribut benöti-
gen Sie hier noch einen
onclick
-Aufruf. Problem ist, dass Sie in irgendeiner Form der
Seite
gericht-detail.html
beim Aufruf mitteilen müssen, welchen Listeneintrag der
Benutzer ausgewählt hat. Dazu, und weil Sie bereits damit vertraut sind, speichern
Sie den ausgewählten Eintrag (den Titel des Gerichts) temporär in einem
ses-
sionStorage
. Mit
item.name
geben Sie den Titel an der richtigen Stelle aus. Später wer-
den Sie dann in der
gericht-detail.html
diese Variable aus dem
sessionStorage
auslesen.
Als Nächstes fügen Sie das Bild ein. Wie auch zuvor mit
item.name
wird hier der Inhalt
der JSON-Datei verarbeitet und der Wert von
item.bild
ausgegeben. Alle Bilder liegen
im Unterordner
bilder
.
<img src="bilder/'+item.bild+'" />
Search WWH ::
Custom Search