Mehr Effizienz bei weniger Aufwand

Teil 5: Workshop Javascript-Bibliothek: Einstieg in jQuery

$('#wechsel').mouseover(function() {
$('#bild').attr('src', 'b2.jpg');
});
$('#wechsel').mouseout(function() {
$('#bild').attr('src', 'b1.jpg');
});

Für mouseover() und mouseout() gibt es auch eine Abkürzung: hover(). hover() erwartet zwei anonyme Funktionen, in denen Sie angeben, was jeweils geschehen soll.

$('#wechsel').hover(
function() {
$('#bild').attr('src', 'b2.
jpg')},
function() {
$('#bild').attr('src', 'b1.jpg');
});

Wenn der Bildwechsel allerdings so einfach ist wie im Beispiel, sollten Sie das besser über CSS-Hintergrundbilder realisieren und nicht Javascript bemühen.

Versteckspiele

Häufig möchte man die Anzeige verändern, etwas anzeigen lassen, was vorher nicht sichtbar war, oder umgekehrt. hide() zum Verbergen von Elementen haben Sie bereits kennengelernt - entsprechend zeigt show() ein vorher verborgenes Element wieder an. Zum Verbergen und Anzeigen wird die CSS-Eigenschaft display genutzt.

Damit Ihre Seite auch bei deaktiviertem Javascript benutzbar bleibt, sollten Sie Elemente, deren Sichtbarkeit Sie verändern wollen, erst per Javascript ausblenden und bei Bedarf dann wieder einblenden. Wenn Sie hingegen schon zu Beginn das Element über CSS display:none ausblenden und erst per Javascript wieder einblenden, ist die Information bei deaktiviertem Javascript nicht zugänglich.

Zum abwechselnden Ein- und Ausblenden von Elementen gibt es eine Kurzform: den Befehl toggle(). Durch toggle() werden Elemente, die derzeit versteckt sind, angezeigt, derzeit sichtbare Elemente werden hingegen versteckt.

Nehmen wir an, ein Inhaltsverzeichnis soll über Klick ein- und ausgeblendet werden. Der zugehörige HTML-Code sieht so aus:

<h2 class="verz">Inhaltsverzeichnis</h2><ul><li>Punkt 1</li><li>Punkt 2</li></ul>

Per Klick auf die Überschrift soll das Inhaltsverzeichnis verschwinden, bei einem erneuten Klick hingegen wieder eingeblendet werden:

$('.verz').click(function() {
$(this).next().toggle();
});

Sehen wir uns den Code genauer an: Für alle Elementen mit der Klasse verz wird per click() eine Funktion an das Klickereignis gebunden. Bei Klick wird die anonyme Funktion ausgeführt.

© Archiv

jQuery-Erweiterungen für jeden Bedarf: plugins.jquery.com.

In dieser greifen Sie über $(this) - der jQuery-Variante von this - auf das aktuell ausgewählte Element zu. Per next() wird das nächste HTML-Element ausgewählt. In diesem Fall ist das die ungeordnete Liste. toggle() sorgt dann für das abwechselnde Anzeigen und Verstecken.

Sollen die Unterpunkte bereits zu Beginn eingeklappt sein, dann ergänzen Sie am Ende noch .next().hide(). Damit verstecken Sie am Anfang das auf die Überschrift folgende Element.

$('.verz')
.click(function() {
$(this).next().toggle();
})
.next()
.hide();

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.