Question

我在HTML5中创建了一个简单的待办事项应用。我添加了一个添加和删除项目的按钮但是，我无法弄清楚如何编辑项目。知道如何创建一个函数，我可以编辑这个列表中的项目吗？

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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更容易灵活。

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

1 个答案: