如何为每个列表项禁用Complete按钮？编辑功能仅生效首个项问题

问题描述 #

我正在完善待办事项应用，已实现点击编辑按钮时禁用Complete按钮的功能，但该功能仅对首个列表项生效。奇怪的是，完成任意列表项的功能可正常作用于所有项，仅禁用逻辑只在索引0的项上生效。

相关代码 #

渲染列表函数 #

function renderList() {
  // 重置列表innerHTML为新列表内容
  el.list.innerHTML = taskList.map(function (data, i) {
    return `<div class="task">
            <div class="task-content">
                <div class="task-set" data-id="${data.id}">
                <input class="new-task-created" value="${
                  data.taskNew
                }" readonly style="${data.textDecoration ? "text-decoration: line-through" : ""}"></input>
                <input class="due-date" type="date" value="${
                  data.taskDate
                }" readonly></input>
                <input class="due-time" type="time" value="${
                  data.taskTime
                }" readonly></input>
            </div>
    
            <div class="action-buttons">
                <button onclick="editItem(event, ${i})" class="edit" data-id="${data.id}">Edit</button>
                <button onclick="deleteItem(event, ${i})" class="delete" data-id="${data.id}">Delete</button>
                <button onclick="completeItem(event, ${i})" class="complete" data-id="${data.id}">Complete</button>
        </div>`
  });

el.input.value = "";
}

编辑按钮处理函数 #

// 用于编辑包含日期和时间的任务的函数
function editItem(event, i) {
  const editEl = event.target.closest(".task");
  let taskUpdate = editEl.querySelector(".new-task-created");
  let dateUpdate = editEl.querySelector(".due-date");
  let timeUpdate = editEl.querySelector(".due-time");
  let editbtn = editEl.querySelector(".edit");
 
  // 问题所在：仅获取页面中第一个带complete类的按钮
  let selectComplete = document.querySelector(".complete")
  
  if (editbtn.innerHTML.toLowerCase() == "edit") {
    taskUpdate.removeAttribute("readonly");
    dateUpdate.removeAttribute("readonly");
    timeUpdate.removeAttribute("readonly");
    taskUpdate.focus();

    // 设置禁用Complete按钮
    selectComplete.setAttribute("disabled", "");
    editbtn.innerHTML = "Save";
  } else {
    taskUpdate.setAttribute("readonly", "readonly");
    dateUpdate.setAttribute("readonly", "readonly");
    timeUpdate.setAttribute("readonly", "readonly");
    // 仅移除第一个complete按钮的禁用状态
    selectComplete.removeAttribute('disabled');
    editbtn.innerHTML = "Edit";
    taskList[i] = {
      id: taskList[i].id,
      taskNew: taskUpdate.value,
      taskDate: dateUpdate.value,
      taskTime: timeUpdate.value,
    };
    // 数据变更后将列表存储到localStorage
    storeList();
    // 重新渲染列表
    renderList();
  }
}

问题原因与解决方法 #

问题根源 #

document.querySelector(".complete")只会返回页面中第一个匹配该选择器的元素，所以无论点击哪个列表项的编辑按钮，操作的都是第一个列表项的Complete按钮，导致禁用逻辑只对首个项生效。

修复方案 #

既然已经通过event.target.closest(".task")获取到当前点击的任务项容器editEl，就应该从这个容器内部查找对应的Complete按钮，将代码中的：

let selectComplete = document.querySelector(".complete")

替换为：

let selectComplete = editEl.querySelector(".complete")

这样就能精准获取当前编辑任务项对应的Complete按钮，禁用/启用逻辑就能正确作用于当前项。

内容的提问来源于stack exchange，提问作者Learning Smart