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 - 創建編輯列表項目的功能

回答

相關問題