JavaScript - 创建编辑列表项目的功能

我在HTML5中创建了一个简单的待办事宜应用程序。我添加了一个按钮来添加和删除项目。
但是，我不知道如何编辑项目。任何想法如何创建一个函数，我可以编辑这个列表上的项目？JavaScript - 创建编辑列表项目的功能

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>

来源

2017-05-24 kieran_mol

创建一个名为'edit'功能 - 其余的应该自己写出来，真的 –

'我无法弄清楚如何编辑items.' < - 究竟你能不能找出 - 更具体，并给我们一些例子。如果你有困难，请看这里：[问] –

@Ovidiu Dolha - splice（）方法添加/删除数组中的项目，并返回删除的项目。我用什么方法编辑？ –

所以现在你上单击处理程序只是调用remove - 即使用户点击“编辑” - 所以你需要辨别他们打了哪个按钮，并调用相应的功能。

现在发生的原因是因为当您为按钮编写ID时，编辑按钮具有相同的类（'remove'） - 因此它们会随着删除按钮一起被触发。

所以首先要做的是给编辑按钮他们自己的类。我也会给每个列表元素它自己的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更灵活更方便。

来源

2017-05-24 14:36:51 b0rgBart3

JavaScript - 创建编辑列表项目的功能

回答

相关问题