JavaScript - 创建编辑列表项的函数

Question

我用 HTML5 创建了一个简单的待办事项应用程序。我添加了一个按钮来添加和删除项目。
但是，我不知道如何编辑项目。知道如何创建一个可以编辑此列表中的项目的功能吗？

function get_todos() {
  var todos = new Array;
  var todos_str = localStorage.getItem('todo');
  if (todos_str !== null) {
    todos = JSON.parse(todos_str);
  }
  return todos;
}

function add() {
  var task = document.getElementById('task').value;
  var todos = get_todos();
  todos.push(task);
  localStorage.setItem('todo', JSON.stringify(todos));
  show();
  return false;
}

function remove() {
  var id = this.getAttribute('id');
  var todos = get_todos();
  todos.splice(id, 1);
  localStorage.setItem('todo', JSON.stringify(todos));
  show();
  return false;
}

function show() {
  var todos = get_todos();
  var html = '<ul class="list">';
  for (var i = 0; i < todos.length; i++) {
    html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">Delete</button>  <button class="remove" id="' + i + '">Edit</button></li>';
  };
  html += '</ul>';
  document.getElementById('todos').innerHTML = html;
  var button_delete = document.getElementsByClassName('remove');
  for (var i = 0; i < button_delete.length; i++) {
    button_delete[i].addEventListener('click', remove);
  };
}
document.getElementById('add').addEventListener('click', add);
show();

<div id="content" style="">
  <!--Grid View Page-->
  <div class="panel" title="Title">
    <input id="task"><button id="add">Add</button>
    <div id="todos"></div>
  </div>
</div>

Answer 1

所以现在您的点击处理程序只是调用删除 - 即使用户单击“编辑” - 因此您需要辨别他们点击了哪个按钮，并调用适当的函数。

现在发生这种情况的原因是，当您写出按钮的 ID 时 - 编辑按钮具有相同的类(“删除”) - 因此它们会与删除按钮一起被触发。

所以要做的第一件事就是为编辑按钮提供自己的类。我还会为每个列表元素提供其自己的 ID，以便您可以轻松地从编辑功能中定位它们。

    var html = '<ul class="list">';
    for(var i=0; i<todos.length; i++) {
        var list_element = "<li id=item'"+i+"'>";
        html += list_element + todos[i] + '<button class="remove" id="' + i  + '">Delete</button>  <button class="edit" id="edit' + i  + '">Edit</button></li>';
    };
    html += '</ul>';

然后，您需要编写另一个循环来定位编辑按钮，以便它们调用您的编辑函数而不是删除函数。

像这样:

    var button_edit = document.getElementsByClassName('edit');

    for (var i=0; i < button_delete.length; i++) {
        button_edit[i].addEventListener('click', edit);
    };

您还可以考虑使用 JQuery [ https://jquery.com/] - 它使得选择和响应 DOM 对象比普通 JavaScript 更容易、更灵活。