Hier kannst du wunderbar die Verwendung von jQuery mit in dein Programm aufnehmen.
Im Prinzip kannst du den Kram mit dem Selectieren der Felder komplett in Javascript realisieren.
Auf
www.selfhtml.org kannst du dir z.B. mal getElementById ansehen und onClick Events.
jQuery hilft dir hier ungemein, da es viele selections und events vereinfacht und Brwoserweichen automatisch macht.
Ich geh mal auf dein Beispiel ein:
field-example.html
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="magicscript.js"></script>
</head>
<body>
<div id="feld1"><img src="figur.jpg" id="figur"/></div>
<div id="feld2"></div>
<div id="feld3"></div>
<div id="feld4"></div>
<div id="feld5"></div>
<div id="feld6"></div>
<div id="feld7"></div>
<div id="feld8"></div>
<div id="feld9"></div>
</body>
</html>
ziemlich banal oder? Im head-Tag binde ich zwei Javascript Dateien ein, die erste ist das jQuery Framework(
Download). Die zweite enthält folgenden Code:
magicscript.js
Code:
$ = jQuery.noConflict();
$(document).ready(function(){
for( var i = 1; i < 10; i++){
$("#feld'+i).click(function(){
$('#feld'+i).append($('#figur'));
}
}
});
Um diesen Code zu verstehen bedarf es eigentlich nicht viel weiteres Wissen als man grundsätzlich erstmal über Javascript besitzen sollte.
Die erste Zeile setzt eine Variable namens $ für das Schlüsselwort "jQuery". Man könnte dies hier als Alias für jQuery verstehen, daraus resultiert, dass man statt $(document) auch einfach jQuery(document) hätte schreiben können, der Einfachheit halber hab ich jedoch schonmal diesen "noConflict Mode" eingebaut.
In der 3. Zeile benutze ich das erste Mal den jQuery Selector und selektiere das "document". Nun rufen wir eine jQuery Funktion auf: ready(). Diese Funktion sagt: "Tue alles innerhalb des Funktionsaufrufs wenn das Dokument vollständig geladen wurde". Dies benutzt man um Konflikte mit nicht komplett geladenen Dokumenten zu vermeiden, es kann nämlich sein, dass man ein Objekt selektiert, welches noch nicht im Dokument vorhanden ist. In dem Fall bekäme man einen Fehler geschmissen und die Ausführung wäre am Arsch.
Nun da ich dem Script gesagt habe, es soll warten bis das Dokument fertig ist, kann ich mit meinen Zeilen fortfahren, ohne mich über solche Fehler sorgen zu müssen. Ich beginne eine einfache Zählschleife, ich denke mal du weist was das ist, wenn du dich schon mit PHP oder einer beliebigen anderen höheren Programmiersprache beschäftigt hast.
Ich laufe diese Schleife insgesamt 9 mal durch(von 1 - 9), um mithilfe des jQuery Selectors die IDs der Felder div-Tags anzusprechen. $('#irgendwas') ist die jQuery Version von window.document.getElementById('irgendwas'). Ich kann hier innerhalb der Klammern auch nach anderen Kriterien selektieren, dazu siehe die
Doku der API.
Wenn ich den Selector richtig gebaut habe, kann ich mit .click eine weitere jQuery Funktion aufrufen, welche ein klick Event an das Objekt bindet. Diesem Klick Event kann ich wiederum eine Funktion zuweisen, welche immer dann ausgeführt wird, wenn ich auf das entsprechende Objekt klicke.
Diese Funktion wiederum führt hier eine weitere jQuery Funktion aus, welche auf dem selben Objekt liegt wie das click-Event.
Mit .append weist man einem Objekt alles mögliche zu. In diesem Beispiel macht jQuery gleich mehrere Dinge für uns.
Es kopiert das Objekt img-Tag mit der id "figur" in das div-Objekt mit der id "feld"+i (sprich das grade geklickte div-Objekt) und löscht es aus dem ursprünglichen div-Objekt.
So, ich habs nich ausprobiert aber ich hoffe die Erklärung war soweit einleuchtend. Wenn du das jetzt erweitern willst und dir ein Schachspiel mit Highscore basteln willst, schau dich am besten mal durch die AJAX Thematik durch, mir ist das heute Abend jedoch zu viel und ich werde meine morgige Weihnachtsfeier mal mit ner guten Portion Schlaf einleiten
