Funktionsaufruf wie mit prototype.js

versuch13

versuch13

Erfahrenes Mitglied
Hi, mit prototype.js ist es möglich eine Funktion auf diese Weise aufzurufen.

HTML: 
$('element').toggle();

Wie wird das ermöglicht?

Sagen wir ich habe eine Funktion toggle()

HTML: 
function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

Wie kann ich erreichen dass ich die Funktion nun zum Beispiel
per

HTML: 
document.getElementById('element').toggle();

aufrufen kann?

Oder noch besser in Verbindung mit der $() Funktion.

HTML: 
	function $() {
		var elements = new Array();
		for (var i = 0; i < arguments.length; i++) {
			var element = arguments[i];
			if (typeof element == 'string')
				element = document.getElementById(element);
			if (arguments.length == 1)
				return element;
			elements.push(element);
		}
		return elements;
	}

Also per

HTML: 
$('element').toggle();

Ich stelle mir das irgendwie so vor, nur an der Umsetzung scheitert es eben.

HTML: 
	function $(element) {
		return document.getElementById('element');
	}
		
	var ? = {
		hide: function() {
		},
		toggle: function() {
		}
	}	
	
	window.onload = function() {		
		$('content').hide();
	}

oder

HTML: 
	function $(element) {
		return document.getElementById('element');
	}
	
	$().prototype.hide = function() {
	}
	
	$().prototype.toggle = function() {
	}
	
	window.onload = function() {		
		$('content').hide();
	}


Nur so einfach scheint es nun nicht zu sein. Ich bin an jeder möglichen Variante
interessiert


Natürlich habe ich mir prototype.js auch angesehen, aber ich werde da nicht
schlau draus.

Danke im vorraus.
 
Zuletzt bearbeitet:
Hier mal nen Beispiel, mit prototype warst du ja schon auf dem richtigen Weg :)
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function $(objId)
{
  o=new objekt();
  o.obj=document.getElementById(objId);
  return o;
}

function objekt(){}


objekt.prototype.toggle=function()
{
  this.obj.className=(this.obj.className=='a')?'b':'a';
  alert('Setze Klassenname auf "'+this.obj.className+'"');
}

//-->
</script>
<style type="text/css">
<!--
.a{color:red}
.b{color:black}
-->
</style>
</head>
<body>
<b id="tester" style="cursor:pointer" onclick="$('tester').toggle()">klick</b>
</body>
</html>
 
Hey, danke, genauso habe ich mir das vorgestellt.

Allerdings habe ich jetzt das Problem, dass ich die $() Funktion nicht mehr als solche, eben einzeln nutzen kann um auf ein Element einfach zu zugreifen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Unbenanntes Dokument</title> 
<script type="text/javascript"> 
<!--
function $(objId)
{
  o=new objekt();
  o.obj=document.getElementById(objId);
  return o;
}
function objekt(){}

objekt.prototype.toggle=function()
{
  this.obj.className=(this.obj.className=='a')?'b':'a';
}
window.onload = function() {
  var inhalt = $('content').innerHTML;
  alert(inhalt);
}
//-->
</script> 
<style type="text/css">
<!--
.a{color:red}
.b{color:black}
-->
</style>
</head> 
<body> 
 <b id="tester" style="cursor:pointer" onclick="$('tester').toggle()">klick</b>
 <div id="content">Inhalt Inhalt Inhalt</div>
</body> 
</html>

var inhalt bleibt undefined, sollte aber in diesem Beispiel jetzt den Inhalt von Element "content" enthalten. Also wie schaffe ich es dass die Grundfunktion der $() Funktion noch erhalten bleibt?


Bin mittlerweile noch auf eine andere Methode gestoßen die es mir das selbe ermöglicht, allerdings besteht auch hier das Problem das die ursprüngliche Funktion der $() Funktion nicht mehr vorhanden ist.

HTML: 
    function $(element) {
        return {
            obj: document.getElementById(element),
            hide: function() {
                this.obj.style.display = 'none';
            },
            toggle: function() {
                (this.obj.style.display != 'none') 
                ? this.obj.style.display = 'none' 
                : this.obj.style.display = '';        
            },
            remove: function() {
                this.obj.parentNode.removeChild(this.obj);
            }
        }
    }

Die prototype Variante sagt mir hier mehr zu, also an einer Lösung für diese Art und Weise wäre ich eher interessiert.

Vielen Dank schon mal für den super Ansatz.

Grüße
 
so sollte es gehen:
Code: 
function $(objId)
{
  
  this.obj=document.getElementById(objId);
  
  this.obj.toggle=function()
    {
      this.className=(this.className=='a')?'b':'a';
    } 
  
  return this.obj;
}
 
Sven Mintel hat gesagt.:
so sollte es gehen:
Code: 
function $(objId)
{
 
  this.obj=document.getElementById(objId);
 
  this.obj.toggle=function()
    {
      this.className=(this.className=='a')?'b':'a';
    } 
 
  return this.obj;
}
Zum Vergrößern anklicken....

Danke! Also war es doch so einfach. Aber nochmal zu dem vorigen Beispiel. Nur um meine Kenntnisse zu vertiefen, könntest du mir das bitte mal etwas kommentieren?

HTML: 
function $(objId)
{
  o=new objekt();
  o.obj=document.getElementById(objId);
  return o;
}

function objekt(){}


objekt.prototype.toggle=function()
{
  this.obj.className=(this.obj.className=='a')?'b':'a';
  alert('Setze Klassenname auf "'+this.obj.className+'"');
}

Es geht mir darum dass ich das Zusammenspiel der Funktionen hier nicht verstehe, nach wo geht das return der $() Funktion, wieso das "o=new objekt();", wieso kann ich in der toggle Funktion per this.obj auf das Objekt zugreifen usw..

Vielen Dank nochmal.


Ach ja, an weiteren Lösungen bin ich trotz des gut funktionierenden Beispiels immer noch interessiert. Von der Syntax her wäre mir die Prototype oder eine JSON Lösung lieber.
 
Zuletzt bearbeitet:
HTML: 
//eine ganz normale Funktion
function $(objId)
{
  o=new objekt();//sie erstellt ein neues Objekt(sie weiter unten)
  o.obj=document.getElementById(objId);//sie setzt eine eigenschaft des erstellten objektes...
  return o;//und gibt diese zurück
}

function objekt(){}//hier das Objekt...hat standardmässig keine Eigenschaften/Methoden


objekt.prototype.toggle=function()//Hier wird für das Objekt oberhalb eine Methode erstellt
{
  this.obj.className=(this.obj.className=='a')?'b':'a';
  alert('Setze Klassenname auf "'+this.obj.className+'"');
}

Im Grunde genommen ist es dasselbe wie das andere, nur kann man per protototype nur Objekten Methoden zuweisen, und nicht deren Eigenschaften(im Beispiel obj).
Deshalb wurde die Methode bei der anderen Variante direkt in der Funktion $() dem betreffenden Element zugewiesen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück