一个页面如何使用两个ajax,使用AJAX进行内联编辑 - 如何在同一页面上创建多个可编辑区域？...

我找到了一个关于如何使用AJAX在页面上创建可编辑区域的教程。

这很棒，除了它是为具有唯一ID的单个元素编写的。我希望能够点击同一页面上的多个元素并使它们也可以编辑(例如，我想改变下面的脚本，因此它不适用于单个元素，但具有特定的多个元素类)。

这是我的HTML：

Edit This

This is some editable content

This is some more editable content

I could do this all day

这是我正在使用的JS文件(我在下面按照Rex的答案更新了脚本)：不幸的是，这个脚本不起作用 - 有人能指出我正确的方向吗？

Event.observe(window, 'load', init, false);

function init() {

makeEditable('edit');

}

function makeEditable(className) {

var editElements = document.getElementsByClassName(className);

for(var i=0;i

Event.observe(editElements[i], 'click', function(){edit($(className))}, false);

Event.observe(editElements[i], 'mouseover', function(){showAsEditable($(className))}, false);

Event.observe(editElements[i], 'mouseout', function(){showAsEditable($(className), true)}, false);

}

}

function showAsEditable(obj, clear) {

if (!clear) {

Element.addClassName(obj, 'editable');

} else {

Element.removeClassName(obj, 'editable');

}

}

function edit(obj) {

Element.hide(obj);

var textarea ='

' + obj.innerHTML + '';

var button = ' OR

';

new Insertion.After(obj, textarea+button);

Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);

Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);

}

function cleanUp(obj, keepEditable) {

Element.remove(obj.id+'_editor');

Element.show(obj);

if (!keepEditable) showAsEditable(obj, true);

}

function saveChanges(obj) {

var new_content = escape($F(obj.id+'_edit'));

obj.preUpdate = obj.innerHTML // stow contents prior to saving in case of an error

obj.innerHTML = "Saving…";

cleanUp(obj, true);

var success = function(t){editComplete(t, obj);}

var failure = function(t){editFailed(t, obj);}

var url = 'http://portal.3roadsmedia.com/scripts/edit.php';

var pars = 'id=' + obj.id + '&content=' + new_content + '&pre=' + obj.preUpdate;

var myAjax = new Ajax.Request(url, {method:'post',

postBody:pars, onSuccess:success, onFailure:failure});

}

function editComplete(t, obj) {

obj.innerHTML = t.responseText;

showAsEditable(obj, true);

}

function editFailed(t, obj) {

obj.innerHTML = 'Sorry, the update failed.';

cleanUp(obj);

}