[jQuery] Redundanten DCode in Funktion auslagern?

[boykottke]

Hallo Leute,

ich habe in den letzten Tagen versucht, mit jQuery ein mobiles Menü zu verwirklichen. Der Grundgedanke:

Ich habe einen Seitenbaum bestehend aus verschachtelten Listen. Lediglich der aktive Menüteil soll eingeblendet sein. (Also die Unterliste, in der sich der Link der aktiven Seite befindet)

Ich habe nun ein Script geschrieben, mit dem der Nutzer durch das Menü navigieren kann. Das sieht folgendermaßen aus:

<script type="text/javascript">
$(document).ready(function() {

	var tdwrapper = ".td-mobimenu";
	var	tdrootline = "#td-mobimenu-root"; 
	var tdbrowse = ".td-mobimenu-browse";
	var	tdback = ".td-mobimenu-back";
	var	tdcurrent = ".current";
	var	tdactive = ".active";
		
	$.fn.checkUl = function() {
		return "#" + $(this).closest("ul").get(0).id;
	}
	
	if($(tdcurrent).length > 0) {
		currentTarget = $(tdcurrent).checkUl();
	} else if($(tdactive).length > 0) {
		currentTarget = $(tdactive).checkUl();
	} else {
		currentTarget = tdrootline;
	}
	
	$("a" + tdback).attr('rel', currentTarget);
	$(tdwrapper + " ul li").hide();
	$(tdwrapper + " ul" + currentTarget +" li").not(tdwrapper + " ul" + currentTarget + " ul li").show();
	if (currentTarget == tdrootline) { $("a" + tdback).hide() } else {$("a" + tdback).show()}

	$("a" + tdbrowse ).click(function(){
		var isTarget = $(this).attr("rel");
		$(tdwrapper + " ul li").hide();
		$(tdwrapper + " ul" + isTarget + " li").not( tdwrapper +" ul" + isTarget + " ul li").show();
		$("a" + tdback).attr('rel', isTarget);
		if (isTarget == tdrootline) { $("a" + tdback ).hide() } else {$("a" + tdback).show()}
	});

	$("a" + tdback).click(function(){
		var isTarget = $(this).attr("rel");
		var parentTarget = "#" + jQuery("ul" + isTarget).closest("ul:not("+isTarget+")").get(0).id;
		$(tdwrapper + " ul li").hide();
		$(tdwrapper + " ul" + parentTarget + " li").not(tdwrapper + " ul" + parentTarget + " ul li").show();
		$("a" + tdback).attr('rel', parentTarget);
		if (parentTarget == tdrootline) { $("a" + tdback).hide() } else {$("a" + tdback).show()}
	});
               
});

</script>

Der Code oben funktioniert wunderbar und macht, was er soll. Jedoch wollte ich nun anfangen, redundanten Code in eigene Funktionen abzulegen. Schließlich wird im ersten Teil fast das gleiche gemacht, wie in den Aufrufen der entsprechenden Links.

Nun, kurz und gut: ab diesem Moment haut es nicht mehr hin.

Während

var isTarget = $(this).attr("rel");
var parentTarget = "#" + jQuery("ul" + isTarget).closest("ul:not("+isTarget+")").get(0).id;

ohne Probleme funktioniert, bekomme ich, wenn ich eine Funktion wie diese

	$.fn.checkUlNext = function() {
return "#" + $(this).closest("ul").not("ul" + this ).get(0).id;  
}
/*---- Aufruf über-----*/
parentTarget = $(isTarget).checkUlNext();

einrichte, den Fehler "checkUlNext is not defined". Auch

	$.fn.checkUlNext = function() {
var i = this; 
return "#" + $(i).closest("ul").not("ul" + i ).get(0).id;  
}
/*---- Aufruf über-----*/
parentTarget = $(isTarget).checkUlNext();

bringt das gleiche Ergebnis. Es geht nicht. Jetzt muss ich ehrlich fragenm: Wo liegt mein Denkfehler beim Schreiben der Funktion? Warum will das Ganze nicht?

Für Eure Hilfe wäre ich sehr dankbar.

 

[para_noid]

Mh...

parentTarget = $(isTarget).checkUlNext();

Für was-auch-immer-in-isTarget-steht gibt es auch keine Funktion checkUlNext. Wenn da irgendein ansprechbares Element herauskommt, hast du nur Zugriff auf die entsprechenden Elementfunktionen, css() oder so. Damit der Wert/String an eine von dir definierte Funktion übergeben wird, sollte der Aufruf so aussehen:

var parentTarget = checkUlNext(isTarget);

Die Funktion selbst implementierst du wie folgt:

function checkUlNext(param){
  return "#" + jQuery("ul" + param).closest("ul:not("+isTarget+")").get(0).id;
}

Ob das so wirklich funktioniert kann ich nich sagen, weil ich den Sinn dahinter auch nicht recht geschnallt habe. Der Aufruf sollte aber zumindest hinhauen.
Denk auch dran, dass du die Funktionen außerhalb des (document).ready-Bereichs setzt.