Frage von abbrechen, 57

jQuery function variable in einer function?

Hi,

ich habe eine sich an einigen Stellen wiederholende Funktion, die ich gerne global verwalten möchte. Meine Idee ist folgende:

var beispiel = $('#abc').method ... ;



$('.xyz').method(function(){
$ ... 
$ ... 
beispiel /* <-- hier soll die Variable rein */
});

Der Code funktioniert soweit, nur kann Chrome mit der Einbindung der Variable nichts anfangen. Und ja, ich habe hier nur die Struktur hingeschrieben, weil es einfacher ist als sich von spezifischen Inhalten ablenken zu lassen, denke ich. =)

Danke im Voraus.

Antwort
von perhp, 36

Schau mal die moderne Verwendung einer Funktion an: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects...

Anschließend kannst du die Funktion mit funktionsname(); aufrufen.

Antwort
von Dory1, 31

Ich glaube in diesem Fall wäre spezifischer Code oder zumindest eine detailliertere Beschreibung schon sinnvoll. Aus deinem Beispiel werde ich jedenfalls nicht so recht schlau. 

Möchtest du die "method" Methode, gebunden an das Objekt $('#abc'), später erneut verwenden (aufrufen) ohne wieder explizit $("#abc") schreiben zu müssen? 

Kommentar von abbrechen ,

Eine in der Variable steckende Methode immer wieder mit anderen IDs zu verwenden wäre das Optimalergebnis. Momentan schaffe ich es leider nicht einmal, den Inhalt der Variablen wiederzugeben (verschiedene Methoden). 

Konkret bastel ich gerade an einer Abfrage mit vier Instanzen, wobei die 4. immer das selbe Ergebnis ist. 

Die vier Instanzen sind sind vier aufeinander gelappte 100x100% Screens, die ich über das Velocity-PlugIn ausblenden lasse bzw. je nach Antwort muss man manchmal nicht nur eine Schicht tiefer, sondern auch zwei, weil die jeweiligen Ergebnisse zu den jeweiligen Antworten gelappt sind, dann müssen die nicht gebrauchten Schichten ebenfalls verschwinden. Da das widerum keinen sonderlichen Effekt braucht, erledigt das hide. 

Konkret sieht das momentan wie folgt aus: 

    $('.h2yes').click(function() {

$('#imbad').hide(1);
$('#imok').hide(1);
$('#motivation').hide(1);
$('#imgood').velocity({ opacity: '0' }, transition).hide(1);
$('#wuhu').delay(transition * 2).velocity({ opacity: '0' }, transition).hide(1);

});

Nach der Frage, wie es dem Nutzer geht, antwortete er, dass es ihm gut ginge. Jetzt befinden wir uns bei der Frage, ob es denn noch besser ginge. Der Nutzer antwortete mit ja, mit der Klasse .h2yes. Da unter diesem Layer aber noch die mit den anderen beiden Möglichkeiten schlummern - #imbad und #imok (für die Antworten mir geht es schlecht / mir geht es in Ordnung, die Antworten vom aller ersten Screen), müssen die zuerst weg. Ebenso kann der Screen #motivation, der einen Motivationssatz bereit hält, weg. Nun wird der Screen mit der kreativen ID "wuhu" kurzzeitig eingeblendet, bevor nur noch der letzte Endscreen unten eingeblendet wird. 

Die Erklärung nur, damit der Einstieg in das "Projekt" schneller geht. 

Wie du siehst, sind da viele Wiederholungen drin, wenn man den Code pro Antwort auf das gesamte Projekt bezieht. Identisch wiederholende Zeilen wie die Einblendung der ID wuhu (eine Art Hallelujah-Ausruf, statt der Motivationsrede) oder das Ausblenden gewisser Screens, aufgrund anderer geklickter Antworten, in Variablen zu verstecken wäre schon gut. Wenn du jedoch eine Möglichkeit siehst, Teile einer Zeile in eine Variable zu stecken oder Variablen mit unterschiedlicher ID-Implementierung zu kreieren, wäre das sogar noch viel besser. Im Grunde wiederholt sich der Vorgang immerhin jedes Mal. Unnötige Schichten werden gehidet, die velocity-Methode* blendet aus und je nach Tiefe kommt noch die #motivation oder das #wuhu hinzu. 

*velocity ist eine auf jQuery basierende Datei von Julian Shapiro.  

Kommentar von Dory1 ,



Wäre eine Implementierung, bei der immer nur das aktuell nötige sichtbar ist nicht viel einfacher zu verwalten? Warum müssen die Schichten schon vorher im HTML "bereitliegen"? Kannst du nicht einfach eine neue Schicht einfügen (und die vorherige löschen) in dem Moment wo du sie wirklich brauchst?

Kommentar von abbrechen ,

Hatte ich auch überlegt und deshalb alle Schichten auf display: none gesetzt und sien ach Gebrauch ins Bild sliden lassen, was zur automatischen Vergabe von display: block führt. Doch, wieso auch immer, haben die "display: none"-Screens immer noch Platz eingenommen und lagen dann auf der y-Achse unsichtbar über und unter dem aktuellen Screen, was zu massiven Höhenverfälschungen führte und ich den Inhalt des jeweils aktuellen Screens teils um 250% verschieben musste, damit er wieder auf dem Screen ist.

Mit der aktuellen Flexbox und dem Schichtenaufbau sollte das Ganze bombenfest sitzen.

Kommentar von Dory1 ,

Hm, also Elemente mit "display: none" werden im Normalfall bei der Darstellung ignoriert, dürften also auch keinerlei Auswirkungen auf die Position von anderen Elementen haben. 

Aber abgesehen davon meinte ich eigentlich etwas anderes. In meiner Vorstellung liegen die "Schichten" gar nicht fertig im HTML bereit, sondern werden wirklich erst zu Laufzeit erzeugt und eingefügt. Stell dir vor du hast die möglichen Schichten in einem Objekt:

var schichten = {
  imbad: "Inhalt 1 ...",
  imok: "Inhalt 2 ...",
  imgood: "Inhalt 3 ..."
};

Jetzt könntest du zur Laufzeit, basierend auf der Wahl des Users eine neue Schicht auf der "Bühne" darstellen:

var userAuswahl = "imbad";

$("#buehne").html('<div class="schicht">'+schichten[userAuswahl]+'</div>');

Ist natürlich nur primitiver Pseudocode, aber ich denke du weißt worauf ich hinaus will.

Keine passende Antwort gefunden?

Fragen Sie die Community