JavaScript Identische Funktionen zusammenfassen

[Mr. Snoot]

Hio,

ich habe mehrere Funktionen, die durch Änderung von Formularfeldern (Checkbox, Select) aufgerufen werden. Im Grunde sind die Funktionen alle identisch, nur das eben die Formularfelder, über welche die Funktionen aufgerufen werden, unterschiedlich sein können.

Ich habe bspw. zwei Auswahllisten mit den IDs sel_kap und sel_gm welche diese Funktionen aufrufen:

//ID sel_kap ruft diese Funktion auf
$(document).ready(function()
{
  $("#sel_kap").change(function()
  {
    var id_kap_gm = $("#sel_gm").children('option:selected').val();
    var id_hauptkategorie = $(this).children('option:selected').val();
    $("#sel_herst").load("sel_herst.php",{"value[]": [id_hauptkategorie, id_kap_gm]});
  });
});

//ID sel_gm ruft diese Funktion auf
$(document).ready(function()
{
  $("#sel_gm").change(function()
  {
    var id_kap_gm = $(this).children('option:selected').val();
    var id_hauptkategorie = $("#sel_kap").children('option:selected').val();
    $("#sel_herst").load("sel_herst.php",{"value[]": [id_hauptkategorie, id_kap_gm]});
  });
});

Wie kann ich das zusammenfassen, damit ich nicht für jedes Formularfeld eine eigene Funktion benötige, in denen letztendlich dasselbe steht?

 

[Ciraxis]

wie wärs mit switch?

 

[D!ve]

Du könntest den 'contains' selector verwenden um die Funktion an alle Selects zu binden, deren id Beispielsweise mit 'sel_' anfängt.

$("[id*='sel_']").change ....

http://api.jquery.com/attribute-contains-selector/

 

[Mr. Snoot]

Danke, das mit dem attribute-contains-Selector funktioniert wunderbar; da muss ich nur Copy and Paste anwenden; für alles andere bin ich in JS zu doof


Bleibt noch ein "Problem".

Ich hab 7 Selects und eine Checkbox; die Selectlisten hab ich jetzt mit $("[id*='sel_']").change(function() abgedeckt, für die Checkbox brauche ich aber $("#verfuegbar").click(function(). Switch - oder 'ne if-Abfrage - klingt ja okay, nur hab ich keine Idee, wie ich das dort einbaue:

if($("[id*='sel_']").change() || $("#verfuegbar").click()) function()

 

[D!ve]

Ich verstehe das Problem nicht. Du kannst doch für Checkbox eine zweite Funktion machen...

 

[Mr. Snoot]

Ja, sieht aber unschön aus, weil 99% beider Funktionen gleich sind

$(document).ready(function()
{
	$("[id*='sel_']").change(function()
	{
		var schreiben = $("#sel_schreiben").children('option:selected').val();
		var lesen = $("#sel_lesen").children('option:selected').val();
		var land = $("#sel_land").children('option:selected').val();
		var anzahl = $("#sel_anzahl").children('option:selected').val();
		var lagernd = $("#verfuegbar").attr('checked');
		var preis = $("#sel_preis").children('option:selected').val();
		var kap_gm = $("#sel_gm").children('option:selected').val();
		var kapaz = $("#sel_kap").children('option:selected').val();
		$("#sel_herst").load("sel_herst.php",{"value[]": [kapaz, kap_gm, preis, lagernd, anzahl, land, lesen, schreiben]});
	});

	$("#verfuegbar").click(function()
	{
		var schreiben = $("#sel_schreiben").children('option:selected').val();
		var lesen = $("#sel_lesen").children('option:selected').val();
		var land = $("#land").children('option:selected').val();
		var anzahl = $("#anzahl").children('option:selected').val();
		var lagernd = $("#verfuegbar").attr('checked');
		var preis = $("#sel_preis").children('option:selected').val();
		var kap_gm = $("#sel_gm").children('option:selected').val();
		var kapaz = $("#sel_kap").children('option:selected').val();
		$("#sel_herst").load("sel_herst.php",{"value[]": [kapaz, kap_gm, preis, lagernd, anzahl, land, lesen, schreiben]});
	});
});

 

[NullPointer]

Lagere den gemeinsamen Code halt in eine extra Funktion aus und ruf diese aus den change()- bzw. click()-Handlern auf.

 

[asdfman]

Kann Javascript keine Higher-order-procedures?

 

[Mr. Snoot]

Keine Ahnung (was das ist ); ich hab mir aber jetzt so geholfen, dass die Checkbox durch eine Auswahlliste abgelöst wurde - damit kann ich das ganze bequem mit in die erste Funktion eingliedern.

 

[asdfman]

Higher-order-procedures sind Funktionen die eine andere Funktion als Parameter übernehmen und/oder eine andere Funktion zurückgeben.

Zum Beispiel:

(define f
  (lambda (x) (+ x 3)))

(define g
  (lambda (func x)
    (* (func x) (func x))))

(define h
  (lambda (x)
    (lambda (y)
      (+ x y))))

Die Funktionen g und h sind höherer Ordnung.
g nimmt als ersten Parameter eine Funktion an und gibt als Wert das Quadrat des Ergebnisses der übergebenen Funktion mit dem zweiten Parameter von g.

(g f 7)
(* (f 7) (f 7))
(* (+ 7 3) (+ 7 3))
(* 10 10)
100

Für den formalen Parameter func wird die Funktion f eingesetzt (die 3 zu ihrem einzigen Argument addiert) und dann dieser der formale Parameter x übergeben (im Beispiel die 7).

Die Funktion h im ersten Beispiel nimmt einen Wert als ersten Parameter und gibt eine Funktion zurück:

(define i (h 5))
(define i (lambda (y) (+ 5 y)))

So bekommt man eine Funktion mit Namen i, die 5 zu ihrem einzigen Argument addiert und die man eigens weiter benutzen kann:

(i 3)
(+ 5 3)
8

Auf dein Problem umgesetzt würde man also eine Funktion höherer Ordnung schreiben, die die minimalen Unterschiede als Parameter übernimmt und den jeweiligen Spezialfall zurückgibt, so dass man die Funktion nur ein einziges Mal schreiben muss.

€: Ich habe einmal kurz nachgelesen und Javascript unterstützt sowohl Funktionen erster Klasse (die es erlauben Funktionen wie eine normale Variable zu benutzen), als auch Funktionen höherer Ordnung.
Würde also vorschlagen, die Sache auf diese Weise zu machen.