如何通过jQuery与HTML输入框更新数组指定索引元素

针对需求——点击编辑按钮填入内容后，修改输入框再点Add Task时要更新原任务而非新增——我调整了代码逻辑，下面是完整的修改版本：

修改后的代码 #

JavaScript 部分

const list = [];
// 用这个变量记录当前正在编辑的任务索引，-1代表未进入编辑状态
let editingIndex = -1;

function dlete(index) {
  list.splice(index, 1);
  // 如果删除的是正在编辑的项，重置编辑状态并清空输入框
  if (index === editingIndex) {
    editingIndex = -1;
    $('#enter_task').val('');
  }
  renderList();
}

function edit(index) {
  $('#enter_task').val(list[index]);
  // 记录当前编辑的任务索引
  editingIndex = index;
  // 切换按钮文字，给用户明确的编辑状态提示
  $('#add').val('Update Task');
}

// 把重复的列表渲染逻辑抽成独立函数，避免代码冗余
function renderList() {
  let html = "<ul id='del'>";
  for (let i = 0; i < list.length; i++) {
    html += `<li>${list[i]} <button onclick='dlete(${i})'>delete</button> <button onclick='edit(${i})'>edit</button></li>`;
  }
  html += "</ul>";
  $("#show").html(html);
}

$(document).ready(function() {
  $('#add').click(function() {
    const text = $("#enter_task").val().trim();
    // 空内容直接跳过，不执行任何操作
    if (!text) return;

    if (editingIndex !== -1) {
      // 处于编辑状态，更新原索引位置的任务内容
      list[editingIndex] = text;
      // 编辑完成后重置状态，恢复按钮文字
      editingIndex = -1;
      $('#add').val('Add Task');
    } else {
      // 非编辑状态，执行新增任务逻辑
      list.push(text);
    }
    // 清空输入框
    $('#enter_task').val('');
    // 重新渲染任务列表
    renderList();
  });
});

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>

核心改动说明 #

• 新增状态追踪变量：添加editingIndex变量，用来区分"新增"和"编辑"两种状态，解决原代码无法判断是否处于编辑模式的问题；
• 编辑状态提示优化：点击编辑按钮时切换Add按钮的文字为"Update Task"，让用户直观感知当前操作模式；
• 代码冗余优化：把重复的列表渲染逻辑抽成renderList函数，方便后续维护和修改；
• 分支逻辑处理：Add按钮点击时根据editingIndex的值判断执行更新还是新增操作；
• 边界情况处理：删除正在编辑的任务时自动重置编辑状态，空内容不执行添加/更新操作，避免无效数据。

内容的提问来源于stack exchange，提问作者muhammad bilal