HTML and CSS Reference
In-Depth Information
setTimeout(function() {
neuespolaroid();
}, 1000);
};
Als Nächstes muss die Funktion an irgendeiner Stelle aufgerufen werden.
3. Anpassung des Buttons
Bis jetzt führt der Button bei einem Klick die Funktion neuespolaroid() aus. Da Sie
aber nun zuerst das alte Polaroid ausblenden möchten, wird dieser Schritt in der
Zukunft von der Funktion polaroidweg() übernommen. Der Button muss also die
Funktion polaroidweg() aufrufen. Allerdings darf er dies auch nur dann tun, wenn
der Benutzer bereits einmal geschüttelt hat.
6
Da Sie die CSS-Klassen mit toggleClass jeweils hinzufügen und entfernen, ist es wich-
tig, den aktuellen Status des jeweiligen Containers zu beachten, also ob das Flickr-Bild
z. B. gerade angezeigt wird, das heißt, ob dem Container des Flickr-Bildes noch zusätz-
lich die CSS-Klasse sichtbar zugeordnet ist oder nicht. Am benutzerfreundlichsten
und auch am wenigsten fehleranfällig ist es, wenn der Button nur ein neues Polaroid
lädt, wenn bereits ein Polaroid geladen wurde, der Benutzer das Gerät aber noch
nicht geschüttelt hat. Um dies zu erreichen, implementieren Sie eine Variable
namens geschuettelt . Nur wenn diese Variable unwahr ( false ) ist, wird beim Drü-
cken des Buttons ein neues Polaroid geladen.
Definieren Sie zunächst die Variable geschuettelt am Anfang des gesamten Java-
Script-Codes, und weisen Sie Ihr den Wert false zu:
var geschuettelt = false;
Den EventHandler des Buttons erweitern Sie nun um eine if -Abfrage, die den Inhalt
der Variablen geschuettelt überprüft:
// Eventhandler: Button
$('button').on('click', function(){
if(geschuettelt) {
polaroidweg();
} else {
neuespolaroid();
}
});
Wenn geschuettelt in diesem Fall vorliegt, das heißt, auf wahr ( true ) gesetzt ist, dann
wird die Funktion polaroidweg() ausgeführt. Ist dies nicht der Fall ( } else { ), wird die
Funktion neuespolaroid() aufgerufen.
Search WWH ::




Custom Search