Det är som sagt ofta bra att först reda ut vad som behöver göras för att lösa uppgiften.
Ibland behöver man göra en lista i på vanlig (nåja) svenska (sällan borde man dock (enlig mig) blanda in jQuery):
För att
leta reda på alla element med klassen
.editable, använd t.ex.
document.querySelectorAll(), som har bra stöd tillbaka till IE8:
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
Loopa över den
NodeList du får tillbaka med en for-loop:
https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Example
För varje element i listan,
lägg till en lyssnare för klick:
https://developer.mozilla.org/en-US/docs/Web/API/element.onclick
Funktionen som körs vid klick skall (om jag förstått uppgiften rätt)
göra elementet "redigerbart" genom att det byts ut mot en textarea och
Spara/
Avbryt-knappar.
Den funktionen borde då:
Formuläret borde hindras från att skickas normalt, så
hindra submit genom att returnera
false från en onsubmit-handler:
http://msdn.microsoft.com/en-us/library/ie/ms536972%28v=vs.85%29.aspx
Man vill veta
om någon av knapparna klickats, så de kan ha varsitt attribut med respektive kommandonamn (t.ex.
data-cmd="submit",
data-cmd="cancel"):
http://www.javascriptkit.com/dhtmltutors/customattributes.shtml
Formuläret har också en klicklyssnare, i vilken man kollar efter vilket element som klicket kom ifrån, och
om det var någon av knapparna utför man det kommando som just den knappen står för.
Vid "Spara":
- Ta innehållet i formulärets textarea och lägg tillbaka i det "redigerbara" elementet.
- Ta bort formuläret ur dokumentet med funktionen removeChild() (https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild)
- Återställ visningen av det redigerade elementet genom att åter manipulera dess style.display-property (se ovan)
Vid "Avbryt" gör man endast steg 2 och 3 ovan.
Det vore väldigt onödigt att använda jQuery till något sådant här (särskilt om man bara åstadkommer något som fungerar halvbra), och jag hoppas verkligen att det inte är ett tillåtet "verktyg" i en kurs om DOM-programmering.
Läs det som står i dokumentationen i länkarna ovan så kommer du troligen att kunna undvika en hel del jQuery-junk.
Här är ett exempel på ca 30 rader som följer beskrivningen ovan, och som fungerar fint (om och om igen) på den givna markupen:
[PHP]window.onload = function () {
var doc = document, editables = doc.querySelectorAll(".editable");
for (var idx=0, len=editables.length; idx<len; ++idx) {
editables[idx].onclick = edit;
}
function handleForm(e) {
e || (e = window.event);
var src = e.target || e.srcElement, cmd = src.getAttribute("data-cmd");
if (!cmd) {return;}
var form = src.form, elem = form.previousSibling;
"submit"==cmd && (elem.innerHTML = form.elements.content.value);
elem.style.display = "";
form.parentNode.removeChild(form);
return false;
}
function createForm(content) {
var form = doc.createElement("form");
form.innerHTML = "<textarea name=content rows=5 cols=40>"+content+"</textarea><br><input type=submit data-cmd=cancel value=Avbryt> <input type=submit data-cmd=submit value=Redigera>";
form.onclick = handleForm;
form.onsubmit = function () {return false;};
return form;
}
function edit() {
var elem = this, target = elem.nextSibling, form = createForm(elem.innerHTML);
elem.style.display = "none";
if (target) {elem.parentNode.insertBefore(form, target);}
else {elem.parentNode.appendChild(form);}
}
};[/PHP]
Lämna nu inte in detta som svar på din uppgift. Det brukar märkas ganska tydligt när elever inte gjort sina uppgifter själva. Detta är bara ett försök att genom nyttiga länkar och exempel svara på frågan du ursprungligen ställde.
/p
