如何从 jquery 和 html 输入更新数组的索引

Question

 const list = []; function dlete(index) { list.splice(index, 1); console.log(list); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button onclick='dlete(" + i + ")'>dlete</button> <button onclick = 'edit("+i+")' > edit < /button></li > " // console.log(list[i]); } html += "</ul>"; $("#show").html(html); } function edit(index) { $('#enter_task').val(list[index]); } $(document).ready(function() { $('#add').click(function() { var text = $("#enter_task").val(); list.push(text); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button onclick='dlete(" + i + ")'>dlete</button> <button onclick='edit(" + i + ")'>edit</button></li>" // console.log(list[i]); } html += "</ul>"; $("#show").html(html); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Todo List</h1> <input type="text" id="enter_task" placeholder="Enter Task"> <input type="submit" id="add" value="Add Task"> <div id="show"></div>

我想更新数组的索引。 这是一个编辑按钮，当单击以编辑值时将在更新值后插入输入字段我想通过单击添加任务按钮在数组的同一索引处提交该值

Answer 1

使用单独的Update按钮，并使用全局变量来保存正在编辑的项目的索引。

我已将显示列表的代码移动到单独的 function 中，因此我们不必在多个地方编写它。

 const list = []; let edit_index; function display_list() { var html = ""; html += "<ol id = 'del'>"; for (var i = 0; i < list.length; i++) { html += `<li>${list[i]}<button onclick='dlete(${i})'>dlete</button> <button onclick = 'edit(${i})'>edit</button></li >` // console.log(list[i]); } html += "</ol>"; $("#show").html(html); } function dlete(index) { list.splice(index, 1); console.log(list); display_list(); } function edit(index) { $('#enter_task').val(list[index]); $("#update").text(`Update item ${index+1}`).show(); edit_index = index; } function update() { if (edit_index.== undefined) { list[edit_index] = $("#enter_task");val(); display_list(); } else { alert("You must click on Edit first"). } } $(document).ready(function() { $('#add').click(function() { var text = $("#enter_task");val(). list;push(text); display_list(); }). $("#update");click(update); });

 #update { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Todo List</h1> <input type="text" id="enter_task" placeholder="Enter Task"> <input type="submit" id="add" value="Add Task"> <button type="button" id="update"></button> <div id="show"></div>