JQuery Kochbuch (German Edition)

Varianten für typischen jQuery-Code.
    Interessanterweise muss ein eigener Iterator gar nicht unbedingt eine Schleife nutzen.
.reverseEach()
und die Standard-Version
.each()
verwenden beide ganz gewöhnliche Schleifen, doch in
.slowEach()
gibt es gar keine. Warum ist das so und wie iteriert man durch die Elemente, ohne eine Schleife zu nutzen?
    JavaScript hat in einem Web-Browser keine
sleep()
-Funktion,wie es sie in vielen Programmiersprachen gibt. Man kann Skripten also nicht einfach so pausieren lassen:
doSomething();
sleep( 1000 );
doSomethingLater();
    Stattdessen – wie bei allen asynchronen Aktivitäten in JavaScript – erhält die Funktion
setTimeout()
einen Callback,der dann aufgerufen wird, wenn die Wartezeit vorüber ist. Die Methode
.slowEach()
erhöht die »Schleifen«-Variable
i
im Callback von
setTimeout()
. Dazu wird ein Closure genutzt, um den Wert der Variablen zwischen zwei »Iterationen« zu sichern. (In Was ist an $(this) falsch? sind Closures genauer beschrieben.)
    Wie
.each()
arbeitet
.slowEach()
direkt auf dem jQuery-Objekt oder dem Array, das Sie mitgeben. Daher beeinflussen alle Änderungen, die Sie an diesem Array vor dem Ende des Iterierens vornehmen, auch die Iteration. Anders als
.each()
ist
.slowEach()
asynchron (die Aufrufe der Callback-Funktion erfolgen, nachdem
.slowEach()
zurückkehrt). Wenn Sie also das jQuery-Objekt oder seine Elemente ändern, nachdem
.slowEach()
zurückkehrt, aber bevor alle Callbacks abgearbeitet sind, kann das auch die Iteration beeinflussen.

Ein Attribut umschalten
    Problem
    Sie brauchen eine Möglichkeit, alle Checkboxen in einer Gruppe umzuschalten. Jede Checkbox soll dabei unabhängig von den anderen umgeschaltet werden.
    Lösung
    Schreiben Sie ein Plugin
.toggleCheck()
,das wie die Methoden
.toggle()
und
.toggleClass()
im jQuery-Core arbeitet und es Ihnen ermöglicht, bei einer Checkbox oder einer Gruppe von Checkboxen den Status zu setzen, ihn zu löschen oder ihn umzuschalten:
// Jedes selektierte Checkbox-Element setzen oder löschen.
// Umschalten des Status, wenn check nicht angegeben wird.

jQuery.fn.toggleCheck = function( check ) {
    return this.toggleAttr( 'checked', true, false, check );
};
    Dann können Sie eine Gruppe von Checkboxen setzen:
$('.toggleme').toggleCheck( true );
    oder sie zurücksetzen:
$('.toggleme').toggleCheck( false );
    oder sie alle umschalten, wobei jede unabhängig vom Rest geändert wird:
$('.toggleme').toggleCheck();
    Diese Methode
.toggleCheck()
bautauf einer allgemeiner nutzbaren Methode
.toggleAttr()
auf,die für beliebige Attribute funktioniert:
// Für jedes in diesem jQuery-Objekt selektierte Element
// wird das Attribut 'name' entweder auf 'onValue' oder auf 'offValue'
// gesetzt - abhängig vom Wert von 'on'. Wird 'on' nicht angegeben,
// wird das Attribut zwischen 'onValue' und 'offValue' umgeschaltet.
// Ist der selektierte Wert (entweder 'onValue' oder 'offValue')
// null oder undefined, wird das Attribut entfernt.
jQuery.fn.toggleAttr = function( name, onValue, offValue, on ) {

    function set( $element, on ) {
     var value = on ? onValue : offValue;
     return value == null ?
     $element.removeAttr( name ) :
     $element.attr( name, value );
    }
    return on !== undefined ?
     set( this, on ) :
     this.each( function( i, element ) {
     var $element = $(element);
     set( $element, $element.attr(name) !== onValue );
     });
};
    Warum nehmen wir die Mühe auf uns, etwas so allgemeingültiges zu schreiben? Nun, auf diese Weise können wir auch ohne großen Aufwand für andere Attribute Umschalter schreiben. Stellen Sie sich vor, Sie müssen das gleiche Ziel wie bei
.toggleCheck()
erreichen, nur wollen Sie dieses Mal input-Controls aktivieren und deaktivieren. Sie können jetzt ein
.toggleEnable()
in einer Zeile Code schreiben:
// Aktivieren oder deaktivieren von input-Elementen aus dem jQuery-Objekt.
// Umschalten des Status, wenn enable weggelassen wird.

jQuery.fn.toggleEnable = function( enable ) {
    return this.toggleAttr( 'disabled', false, true, enable );
};
    Beachten Sie, wie wir mit den Parametern
onValue
und
offValue
die Attributwerte
true
und
false
setzen und damit leicht vom »Aktivieren« eines Elements sprechen können, ohne uns mit der umgekehrten Variante des Attributs
disabled
herumschlagen zu müssen.
    Ein weiteres Beispiel ist das Umschalten eines Attributs
foo
, bei dem der »on«-Status der Stringwert
bar
und der »off«-Status das Fehlen des Attributs ist. Wieder benötigen wir nur eine Zeile Code:
//