如何通过选择器获取动态生成的项目对象？TodoList开发问题

你的核心问题在于没有将DOM元素和对应的Project实例建立唯一关联，且当前用固定字符串"id"标记选中项目的方式无法区分不同的Project对象。下面是具体的修复方案：

1. 给Project实例添加唯一标识 #

首先，确保每个Project对象都有一个全局唯一的id，这样才能和DOM元素一一对应。可以在创建Project时生成：

class Project {
  constructor(title, desc) {
    // 用时间戳生成唯一id，也可以用uuid库生成更可靠的标识
    this.id = `project-${Date.now()}`;
    this.title = title;
    this.desc = desc;
    this.tasks = []; // 你的任务数组
  }
}

2. 将Project的id绑定到DOM元素上 #

修改populateProject函数，把Project实例的id存入DOM元素的dataset属性（比直接设置id更安全，避免全局id冲突），同时用active类标记选中状态（替代之前操作id的方式）：

function populateProject(latestproject) {
  const projectsdiv = document.querySelector(".projectsdiv");
  let proji = document.createElement("div");
  proji.classList.add("projetstyle");
  // 把Project的id绑定到DOM的dataset属性中
  proji.dataset.projectId = latestproject.id;

  let titre = document.createElement("h1");
  titre.textContent = latestproject.title;
  proji.appendChild(titre);

  let descri = document.createElement("p");
  descri.textContent = latestproject.desc;
  proji.appendChild(descri);

  proji.addEventListener("click", () => {
    // 移除所有项目的选中状态
    document.querySelectorAll('.projetstyle').forEach(el => {
      el.classList.remove("active");
    });
    // 标记当前项目为选中状态
    proji.classList.add("active");
  });

  projectsdiv.appendChild(proji);
}

3. 根据选中的DOM元素获取对应的Project实例 #

修改原getProjectById函数，通过选中的DOM元素的dataset.projectId去项目数组中匹配对应的实例：

function getSelectedProject(projectsArray) {
  // 获取当前选中的项目DOM元素
  const selectedEl = document.querySelector('.projetstyle.active');
  if (!selectedEl) return null; // 没有选中项目时返回null

  // 从dataset中取出绑定的Project id
  const targetId = selectedEl.dataset.projectId;
  // 在数组中查找对应的Project实例
  return projectsArray.find(project => project.id === targetId);
}

为什么之前的方法失效？ #

• 你给选中的DOM元素设置的是固定字符串"id"，所有选中项目都会用同一个id，无法区分不同的Project实例；
• 没有将Project的唯一标识和DOM元素绑定，导致无法通过DOM反查到对应的对象。

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