使用javascript为<li>元素内的文本添加编辑选项

Question

我想更改li.innerhtml当我点击它时它会创建新的输入，我可以更改li的文本但是在我想要保存之后，它不起作用。 当我点击那个李

时，我需要更改每个li文本

v << "Hello" << "World";

Answer 1

您可以在创建ID时分配li，然后将此id作为数据属性添加到input，这样您就可以知道哪个输入已更改，哪个输入{ {1}}要更新。

下面

li

Answer 2

修改您的功能如下

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

var arr = ["one", "two", "three"];
var ul = document.createElement("ul");
document.body.appendChild(ul);

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

var input = 0;

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


function saveText(){
	var li=ul.children;
	for (var liElement in li) {
		li[liElement].innerHTML = this.value;
	}
    
}

Answer 3

主要问题是，li中的saveText()未定义。你必须以某种方式将它引用到input。

另请注意，您要为每个单独的ul元素创建一个li容器。我不知道这是否有意。然而，如果你看到第二个例子，它可能会很方便。

使用data-attribute

的示例

以下是一个示例，说明如何使用代码对数据属性进行一些细微更改（请参阅注释）：

//An array holding potential li-elements
var arr = ['one', 'two', 'three'];

//Creates an input element to change the text for the li element with
function changeText(){
	var tIndex = this.getAttribute('data-index'); //The index we gave to the li-element on creating
	var input = document.querySelector("input[data-index='" + tIndex + "']"); //Check if the input exists already

	if(!input){
		input = document.createElement('input'); //Make it local
		input.setAttribute('data-index', this.getAttribute('data-index')); //We use this to find the correct li-element in saveText
		input.addEventListener('blur', saveText);
		document.body.appendChild(input);
		input.value = this.innerHTML;
	}
};

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

function saveText(){
	var li = document.querySelector("li[data-index='" + this.getAttribute('data-index') + "']"); //Now with the index we can find our element
	li.innerHTML = this.value;
};

window.onload = function(){
	for(var i = 0; i < arr.length; i++){
		var li = document.createElement('li');
		li.setAttribute('data-index', i); //We use this to find the correct li-element in saveText
		li.addEventListener('click', changeText);
		setText(li, arr[i]);
		var ul = document.createElement('ul');
		document.body.appendChild(ul);
		ul.appendChild(li);
	}
}

使用ul作为

的parentNode的示例

另一种方法是将input添加到ul，这样您就可以访问其父级：

//An array holding potential li-elements
    var arr = ['one', 'two', 'three'];

    //Creates an input element to change the text for the li element with
    function changeText(){
    	var input = this.parentNode.querySelector('input'); //Check if exists yet

    	if(!input){
    		input = document.createElement('input'); 
    		input.addEventListener('blur', saveText);
    		this.parentNode.appendChild(input); //We add the input to the ul instead of the body
    		input.value = this.innerHTML;
    	}
    };

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

    function saveText(){
    	var li = this.parentNode.firstChild; //firstchild is the li in this case
    	li.innerHTML = this.value;
    };

    window.onload = function(){
    	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);
    	}
    }

使用contentEditable

的示例

也可以通过使li元素可编辑来完成： https://developer.mozilla.org/de/docs/Web/API/HTMLElement/contentEditable

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

window.onload = function(){
	var ul = document.createElement('ul');
	for(var i = 0; i < arr.length; i++){
		var li = document.createElement('li');
		li.textContent = arr[i];
		li.contentEditable = true;
		ul.appendChild(li);
	};
	document.body.appendChild(ul);
}