Исходя из того, что вы уже поделились, звучит так, как будто у вас уже есть все редактируемые области со страницы внутри массива.Исходя из вашего комментария, кажется, что это массив со ссылками на фактические elements
, а не просто массив их идентификаторов.Итак, вот мое предложение, которое не использует кнопки:
// Note you may not need to pass in the array like I did.
function addListeners( array ){
// ADD CODE HERE FOR A FOR LOOP
// LOOP THROUGH THE ARRAY OF ELEMENTS
for(...){
// For all major browsers, except IE 8 and earlier
if ( array[x].addEventListener) {
array[x].addEventListener("click", makeEditable);
array[x].addEventListener("blur", removeEditable);
// For IE 8 and earlier versions
} else if (array[x].attachEvent) {
array[x].attachEvent("onclick", makeEditable);
array[x].attachEvent("onblur", removeEditable);
}
// END FOR LOOP
}
}
// Call our function to add the listeners. Make sure the page is loaded first!
addListeners( arrayOfElements);
function makeEditable(){
// ... Your code to make an area editable
}
function removeEditable(){
// ... Your code to remove content editable
}
Если у вас есть массив, это просто идентификаторы элементов, которые вы можете сделать для цикла for, который проходит по массиву и выполняет document.getElementById( ... )
накаждый элемент в массиве, а затем сохраните ссылку на элемент в массиве вместо идентификатора.
Вы можете сделать что-то очень похожее, если хотите / хотите сохранить кнопки.Вы можете использовать ту же или похожую функцию addListeners
, которую я сделал, чтобы добавить слушателей к кнопкам, которые в свою очередь запускают функцию makeEditable
в нужной области.Затем вам нужно будет добавить onblur
прослушиватель событий в то же время, когда вы сделали область редактируемой, чтобы она знала, что отключается сама, когда пользователь покидает ее.
Надеюсь, это заставит вас двигаться в правильном направлении.