如何通过唯一ID编辑任务？

Question

当我单击编辑时，我试图获取任务的 ID。这样做的原因是我想使用

data-id="${task.id}"

中的 ID 来标识创建的每个任务。

我创建了一个渲染任务的函数并且它可以工作：

taskArray.forEach((task) => {
        let divEl = document.createElement("div");
        divEl.classList.add("task-flex");
    
        divEl.innerHTML = `<div class="task-buttons">
            <img src="./resources/icons/edit.png" id="edit-button" alt="Edit Buttin"/>
            <img src="./resources/icons/bin.png" id="remove-button" alt="Bin Buttons" />
            <img src="./resources/icons/completed-task.png" id="complete-button" alt="Complete Task Button" />
          </div>
    
          <div class="task-to-do" data-id="${task.id}" data-value = "${task.timeStamp}">
              <div class="list" id="list-item-date">Due: ${task.date}</div>
              <div class="list" id="list-item-task">${task.task}</div>
          </div>`;
    
        taskListEl.append(divEl);
        
      });

这部分我需要帮助。

我选择了所有的

edit-buttons

，然后我在forEach循环中为

edit-button

创建了一个forEach循环，我使用最接近的方法找到编辑按钮的父元素（

editBtn

）

这部分不起作用，它在控制台中没有执行任何操作

// Event listener for edit buttons
    let editBtns = document.querySelectorAll(".edit-button");
    

    editBtns.forEach(editBtn => {
      let toDoTask = editBtn.closest(".task-to-do");
      let dataId = toDoTask.getAttribute("data-id");
      
      editBtn.addEventListener("click", (event) => {
          console.log(`Edit button clicked for task with data-id: ${dataId}`);
      });
  });

这只是一个功能

Answer 1

您可以直接在 forEach 循环中将事件侦听器添加到每个任务的 div (

divEl

)。但是，您可以使用

data-

属性来指定操作，而不是为每个图片分配 id。在您的示例中，每个图标图像对于每个任务都会获得相同的

id

，这不是一个好的做法。也许您的意思是

class

？

然后，您可以定义函数来处理编辑、删除和完成操作，其中任务的 id 作为变量从事件侦听器函数传递。这是一个例子：

const taskArray = [
  { id: 1, timeStamp: '1234', date: '01/01/01', task: 'Task 1' },
  { id: 2, timeStamp: '1234', date: '01/01/01', task: 'Task 2' },
  { id: 3, timeStamp: '1234', date: '01/01/01', task: 'Task 3' }
]

const taskListEl = document.getElementById('taskList')

taskArray.forEach((task) => {
  let divEl = document.createElement('div')

  divEl.classList.add('task-flex')
  divEl.innerHTML = `<div class="task-buttons">
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXBlbmNpbCI+PHBhdGggZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVaIi8+PHBhdGggZD0ibTE1IDUgNCA0Ii8+PC9zdmc+"
      data-action="edit" alt="Edit Buttin"/>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRyYXNoIj48cGF0aCBkPSJNMyA2aDE4Ii8+PHBhdGggZD0iTTE5IDZ2MTRjMCAxLTEgMi0yIDJIN2MtMSAwLTItMS0yLTJWNiIvPjxwYXRoIGQ9Ik04IDZWNGMwLTEgMS0yIDItMmg0YzEgMCAyIDEgMiAydjIiLz48L3N2Zz4="
      data-action="remove" alt="Bin Buttons" />
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4="
      data-action="complete" alt="Complete Task Button" />
  </div>

  <div class="task-to-do" data-id="${task.id}" data-value = "${task.timeStamp}">
      <div class="list" id="list-item-date">Due: ${task.date}</div>
      <div class="list" id="list-item-task">${task.task}</div>
  </div>`

  divEl.addEventListener('click', (event) => {
    switch (event.target.dataset.action) {
      case 'edit':
        editTask(task.id)
        break
      case 'remove':
        removeTask(task.id)
        break
      case 'complete':
        completeTask(task.id)
        break
    }
  })

  taskListEl.append(divEl)
})

function editTask(id) {
  console.log('Edit task id ' + id)
}

function removeTask(id) {
  console.log('Remove task id ' + id)
}

function completeTask(id) {
  console.log('Complete task id ' + id)
}

body {
 font-family: 'Arial';
 font-size: 12px;
}
.task-buttons img {
  height: 14px;
  width: 14px;
  cursor: pointer;
 }
 
 .task-flex {
  display: flex;
  margin-bottom: 5px;
 }
 
 .task-to-do {
  display: flex;
 }
 
 .list {
  margin-left: 20px;
 }

<html>
<head></head>
<body>
  <div id="taskList"></div>
</body>
</html>