javascript - 为里面的文本添加编辑选项使用 JavaScript 的元素

Question

我想li.innerHtml在单击<li>它时更改它会创建新的输入，我可以在其中更改<li>'s 的文本，但之后我想保存它，它不能正常工作。<li>单击该文本时，我需要更改每个文本<li>

function setText(elem, text){
	elem.innerHTML += text;
}

var arr = ["one", "two", "three"];


for( var i = 0; i < arr.length; i++ ){
	var li = document.createElement("li");
	li.addEventListener("click", changeText);
	setText(li, arr[i]);
	var ul = document.createElement("ul");
	document.body.appendChild(ul);
	ul.appendChild(li);
}

var input = 0;

function changeText(){
	input = document.createElement("input");
	input.addEventListener("blur", saveText);
	document.body.appendChild(input);
	input.value = this.innerHTML;
}


function saveText(){
    li.innerHTML = this.value;
}

标签： javascript

Answer 1

ID您可以在创建时分配一个li，然后将其添加id为数据属性，input以便您知道哪个输入已更改以及li要更新哪个。

这里

function setText(elem, text){
	elem.innerHTML += text;
}

var arr = ["one", "two", "three"];


for( var i = 0; i < arr.length; i++ ){
	var li = document.createElement("li");
  li.id = i;
	li.addEventListener("click", changeText);
	setText(li, arr[i]);
	var ul = document.createElement("ul");
	document.body.appendChild(ul);
	ul.appendChild(li);
}

var input = 0;

function changeText(event){
	input = document.createElement("input");
	input.addEventListener("blur", saveText);
	document.body.appendChild(input);
   
  input.setAttribute("data-liID", event.target.id);
	input.value = this.innerHTML;
}


function saveText(event){
   document.getElementById(event.srcElement.getAttribute("data-liID")).innerHTML = this.value
   
}