JQuery Kochbuch (German Edition)

Variablen:
$(document).ready( function() {

    var $country = $('#country');

    function setVisibility() {
     var value = $country.val();
     $('#state').toggle( value == 'US' );
     $('#province').toggle( value == 'CA' );
    }

    setVisibility();
    $country.bind( 'change keyup', setVisibility );
});
    Lösung 2
    Verwenden Sie das Event Triggering von jQuery, um das Event direkt nach dem Binden zu feuern. Dazu kommen noch der
.bind()
-Trick und die lokalen Variablen aus Lösung 1:
$(document).ready( function() {

    $('#country')
     .bind( 'change keyup', function() {
     var value = $(this).val();
     $('#state').toggle( value == 'US' );
     $('#province').toggle( value == 'CA' );
     })
     .trigger('change');

});
    Diskussion
    Es ist in fast jeder Programmiersprache gute Praxis, doppelten Code in eine eigene Funktion auszulagern, die dann von mehreren Orten aus aufgerufen werden kann. Lösung 1 folgt diesem Ansatz: Statt den Code für das Setzen der Sichtbarkeit zu wiederholen, gibt es ihn nur einmal in der Funktion
setVisibility()
.Der Code ruft dann diese Funktion direkt beim Starten und indirekt beim Feuern der Events
change
oder
keyup
auf.
    In Lösung 2 wird auch eine gemeinsame Funktion für beide Fälle verwendet. Aber anstatt der Funktion einen Namen zu geben, so dass man sie direkt beim Starten aufrufen kann, setzt der Code die Funktion nur als Eventhandler für die
change
- und
keyup
-Events. Dann nutzt er die Methode
trigger()
, umeines der Events auszulösen – und damit die Funktion indirekt aufzurufen.
    Diese Vorgehensweisen sind mehr oder weniger austauschbar – es ist eher eine Geschmacksfrage, was Sie lieber nutzen wollen.

Ihre verketteten jQuery-Methoden formatieren
    Problem
    Sie haben eine recht lange Verkettung von jQuery-Methoden, die Methoden wie
.children()
und
.end()
enthalten, um mit diversen miteinander verbundenen Elementen zu arbeiten. Es ist schwierig, zu erkennen, welche Operation auf welche Elemente angewendet wird:
$('#box').addClass('contentBox').children(':header')
    .addClass('contentTitle').click(function() {
     $(this).siblings('.contentBody').toggle();
    }).end().children(':not(.contentTitle)')
    .addClass('contentBody').end()
    .append('')
    .children('.contentFooter').text('generated content');
    Lösung
    Spendieren Sie jedem Methoden-Aufruf in der Kette seine eigene Code-Zeile und bringen Sie die
.
-Operatoren an den Anfang der Zeilen. Dann rücken Sie die Teile der Kette ein, die ein anderes Set von Elementen betreffen.
    Rücken Sie immer dann weiter ein, wenn Sie Methoden wie
.children()
oder
.siblings()
nutzen, um andere Elemente zu selektieren, und reduzieren Sie den »Einrückungsgrad«, wenn Sie
.end()
aufrufen, um zur vorigen jQuery-Selektion zurückzukehren.
    Wenn Sie mit jQuery noch nicht so viel zu tun hatten, sollten Sie eventuell zuerst die grundlegenden Rezepte zum Verketten und
Verwenden von .end()
in Chapter 1 lesen.
$('#box')
    .addClass('contentBox')
    .children(':header')
     .addClass('contentTitle')
     .click(function() {
     $(this).siblings('.contentBody').toggle();
     })
    .end()
    .children(':not(.contentTitle)')
     .addClass('contentBody')
    .end()
    .append('')
    .children('.contentFooter')
     .text('generated content');
    Diskussion
    Indem man jedem Aufruf seine eigene Zeile spendiert, wird es sehr einfach, den Code zu überfliegen und zu erkennen, was geschieht. Durch das Einrücken ist auch offensichtlich, wann Sie das Set mit den Elementen verändern, so dass destruktive Operationen und entsprechendes Rückgängigmachen per
.end()
besser verfolgt werden können.
    Dieser Einrückungs-Stil führt dazu, dass die Aufrufe für ein bestimmtes Set in einer Spalte stehen, auch wenn sie nicht direkt aufeinander folgen. So ist zum Beispiel klar, dass dem Wrapper-