Javascript：编辑列表项

Question

我使用 vanilla JS 制作了一个待办事项列表，每个列表项都有一个删除和一个编辑选项，删除工作正常，但是当我编辑一个列表项时，它不是在编辑我使用编辑选项的行项目，而是它更新最后添加的列表项

HTML：

<div id="wrapper">
<div id="inputWrapper">
  <input type="text" name="" id="listDetail" 
 placeholder="What's the task about" autofocus>
  <button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>

JS：

var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");

addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);

}
else {
alert("List item cannot be empty");
}

var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);

var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);

var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function () {
  this.parentElement.style.display = "none";
}
}

var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);

var editC = document.getElementsByClassName("edit");

for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
  var p = prompt("Edit your entry");
  entry.innerText = p;
 }
}

var liTag = document.getElementsByTagName("LI");

for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function () {
  this.classList.toggle("checked");
}
}

listDetail.value = "";
}

我如何确保它更新正确的订单项？

Answer 1

你的问题就在这里：

var entry = document.createElement("SPAN"); // <<<

...

for (var e = 0; e < editC.length; e++) {
    editC[e].onclick = function () {
        var p = prompt("Edit your entry");
        entry.innerText = p; // <<< you are modifying the entry that you've just created
    }
}

我认为不需要for循环。

 var listDetail = document.getElementById("listDetail"); var addBtn = document.getElementById("addBtn"); var ul = document.getElementById("ul"); addBtn.onclick = function () { if (listDetail.value !== "") { var li = document.createElement("LI"); ul.appendChild(li); } else { alert("List item cannot be empty"); } var entry = document.createElement("SPAN"); var entryText = document.createTextNode(listDetail.value); entry.className = "userEntry"; entry.appendChild(entryText); li.appendChild(entry); var close = document.createElement("SPAN"); var cText = document.createTextNode("\×"); close.className = "close"; close.appendChild(cText); li.appendChild(close); close.onclick = function () { this.parentElement.style.display = "none"; } var edit = document.createElement("SPAN"); var eText = document.createTextNode("\✎"); edit.className = "edit"; edit.appendChild(eText); li.appendChild(edit); edit.onclick = function () { var p = prompt("Edit your entry"); var entry = this.parentElement.getElementsByClassName("userEntry")[0]; // get sibling userEntry element entry.innerText = p; } li.onclick = function () { this.classList.toggle("checked"); } listDetail.value = ""; }

 <body> <div id="wrapper"> <div id="inputWrapper"> <input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus> <button id="addBtn">Add</button> </div> <ul id="ul"></ul>

Answer 2

您必须为每个特定标签创建一个ID ，当用户编辑时，它使用该ID而不是类。

 var listDetail = document.getElementById("listDetail"); var addBtn = document.getElementById("addBtn"); var ul = document.getElementById("ul"); var cnt = 0 addBtn.onclick = function() { if (listDetail.value !== "") { var li = document.createElement("LI"); ul.appendChild(li); } else { alert("List item cannot be empty"); } var entry = document.createElement("SPAN"); var entryText = document.createTextNode(listDetail.value); entry.className = "userEntry"; entry.setAttribute("id", "entry" + cnt); entry.appendChild(entryText); li.appendChild(entry); var span = document.createElement("SPAN"); var spanText = document.createTextNode("\×"); span.className = "close"; span.appendChild(spanText); li.appendChild(span); var close = document.getElementsByClassName("close"); for (var i = 0; i < close.length; i++) { close[i].onclick = function() { this.parentElement.style.display = "none"; } } var edit = document.createElement("SPAN"); var eText = document.createTextNode("\✎"); edit.className = "edit"; edit.setAttribute("id", "edit" + cnt); edit.appendChild(eText); li.appendChild(edit); var editC = document.getElementById("edit" + cnt); editC.onclick = function() { var p = prompt("Edit your entry"); var obj = document.getElementById("entry" + cnt); obj.innerText = p; } var liTag = document.getElementsByTagName("LI"); for (var j = 0; j < liTag.length; j++) { liTag[j].onclick = function() { this.classList.toggle("checked"); } } listDetail.value = ""; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script> <div id="wrapper"> <div id="inputWrapper"> <input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus> <button id="addBtn">Add</button> </div> <ul id="ul"></ul>