Question

我已经使用Vanilla JS制作了一个待办事项列表，每个列表项都有一个delete和一个edit选项，delete可以正常工作，但是当我编辑一个列表项时，它并没有在编辑使用该选项的行项选项，而是更新最后添加的列表项

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

您必须为每个特定标签创建一个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("\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.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>

Answer 2

这是您的问题所在：

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("\u00D7");
  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("\u270E");
  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>

Javascript：编辑列表项

2 个答案: