jQuery - Filter

[dedlfix]

Tach!

also meinst du so?

Nein, denn damit verdoppelst du den Code und rahmst ihn noch zusätzlich unnötig ein.

Grundlagen von Javascript: Eine Funktion ist in Javascript ein First-Class-Citizen. Das heißt, sie ist unter anderem genauso als Parameter übergebbar wie andere Werte. Du kannst eine Funktion aufrufen und 42 übergeben oder 'einen String' oder eine anonyme function() {...} oder eine Variable, die diese Werte enthält oder darauf verweist. Du kannst genausogut eine Variable erstellen und dieser beliebige Werte zuweisen, inklusive Funktionen:

var foo = 42;
var bar = 'ein String';
var qux = function () {...}

Funktionen können aber auch herkömmlich erstellt und mit einem Namen versehen sein.

function qux() {...}

Im Prinzip ist es egal welche der beiden Arten du verwendest, um eine Funktion zu erstellen. Wenn nun eine Funktion eine andere Funktion übergeben haben möchte, die sie später aufrufen kann, ist es auch egal, ob du die Funktion direkt an der Stalle als anonyme Funktion erstellst oder sie irgendwoanders erstellst und nur einen Verweis auf die Funktion übergibst. Ein solcher Verweis ist entweder der Name der Funktion oder der Name einer Variablen, der diese Funktion zugewiesen wurde.

In deinem Fall hast du einen Funktionsaufruf keyup(), der im Hintergrund einen Eventhandler erstellt und dafür eine Funktion übergeben haben möchte, die im Falle des Ereignisses aufgerufen werden soll. Diese zu übergebende Funktion kann nun eine sofort notierte anonyme Funktion sein, oder der Verweis auf eine anderenorts definierte Funktion. Und letzteres ist, was du dir zunutze machen solltest.

Teil 1: steht irgendwo, muss nicht unbedingt innerhalb von $(document).ready() sein.

function doSomethingWithAusgabe() { // hier einen sprechenderen Namen wählen, der beschreibt, was die Funktion macht
    $("#ausgabe div").each(function(){
        ... 
    });
}

Teil 2: für den DOM-Ready-Handler

$(document).ready(function(){
    $("#filter").keyup(doSomethingWithAusgabe);
});

---

Das war zumindest das, was ich dir eigentlich sagen wollte. Nun sehe ich aber gerade, dass der keyup-Eventhandler doch etwas anderes machen soll, als das was einmalig zum Programmstart geschehen soll. Zu ersterem kommt noch das Schreiben in den localStorage hinzu und letzeres braucht den Wert aus dem localStorage. In dem Fall muss die Strategie geändert werden, und meine Vorgehensweise wäre:

function doSomethingWithAusgabe() {
    var filter = localStorage.filter || 'defaultValue'; // defaultValue nach Bedarf anpassen
    $("#ausgabe div").each(function(){
        ... 
    });
}

$(document).ready(function(){
    $("#filter").keyup(function () {
        localStorage.filter = $(this).val();

        doSomethingWithAusgabe();
    });
});

Auf diese Weise ist doSomethingWithAusgabe() für beide Vorgänge nutzbar. Sie holt sich den Wert aus dem localStorage und macht was damit. Im Falle des keyup-Events wird vorher zusätzlich noch dieser Wert geschrieben.

Zu beachten ist noch der Fall des Erstaufrufs der Seite, wenn doSomethingWithAusgabe() aufgerufen wird, aber vorher noch kein localStorage beschrieben wurde. Dafür solltest du einen sinnvollen 'defaultValue' setzen, oder du fängst diesen Fall auf andere Weise ab.

dedlfix.