Javascript 更改数组元素值'；s风格

我正在建立一个待办事项列表，但我不知道如何保持我的数组值，这些数组值具有贯穿整个装饰的线条。 调用矩渲染方法时，将从一开始构建阵列。这意味着，如果我删除一个li，则已通过复选框标记的所有其他li将丢失装饰。 我能做些什么来保持线路畅通？ 到目前为止，我在markTask方法中尝试了将原始值替换为行通过的值，但没有成功。 基本上，我试图完成的是通过插入带有“线通过”的值，以便能够检查此值是否具有“线通过”样式，并且在渲染后能够保持选中的复选框处于选中状态

到目前为止，我的代码是：

类待办事项{
构造函数（）{
this.input=document.getElementById（“输入”）；
this.ul=document.getElementById（“ul”）；
this.form=document.getElementById（“表单”）；
this.tasks=[]；
this.registerEvent（）；
}
registerEvent（）{
this.form.addEventListener（“提交”，（事件）=>{
event.preventDefault（）；
this.createTask（this.input.value）；
this.form.reset（）；
});
}
createTask（任务）{
if（task.trim（）.length==0）{
返回；
}
this.tasks.push（任务）；
这个。render（）；
}
删除任务（任务）{
const myTask=task.target；
const parent=myTask.parentNode；
const taskToRemove=parent.childNodes[1].textContent；
const index=this.tasks.indexOf（taskToRemove）；
这个.tasks.splice（索引，1）；
这个。render（）；
}
标记任务（任务）{
const myTask=task.target；
const parent=myTask.parentNode；
if（myTask.checked）{
parent.style.textDecoration=“行通过”；
}否则{
parent.style.textdeaction=“无”；
}
}
render（）{
this.ul.innerHTML=“”；
this.tasks.forEach（（任务）=>{
const li=document.createElement（“li”）；
const cb=document.createElement（“输入”）；
cb.type=“复选框”；
cb.addEventListener（“单击”，（e）=>{
这项任务（e）；
});
李.儿童（cb）；
li.append（document.createTextNode（任务））；
const btn=document.createElement（“按钮”）；
李.儿童(btn);；
btn.textContent=“删除”；
添加（“删除”）；
btn.addEventListener（“单击”，（e）=>{
这是删除任务（e）；
});
本.ul.儿童（李）；
});
}
}
新的待办事项（）

添加

标记元素后，仅更改元素的状态和属性。但删除后，您将使用
render
整个列表重新创建，并且在
render
中未选中
rendering
参数

您的渲染应该是：

render（）{
this.ul.innerHTML=“”；
this.tasks.forEach（（任务）=>{
const li=document.createElement（“li”）；
const cb=document.createElement（“输入”）；
cb.type=“复选框”；
cb.addEventListener（“单击”，（e）=>{
这项任务（e）；
});
李.儿童（cb）；
//未检查渲染
如果（任务已选中）{
li.style.textdearching=“行通过”；
cb.checked=‘checked’；
}
li.append（document.createTextNode（任务））；
const btn=document.createElement（“按钮”）；
李.儿童(btn);；
btn.textContent=“删除”；
添加（“删除”）；
btn.addEventListener（“单击”，（e）=>{
这是删除任务（e）；
});
本.ul.儿童（李）；
});
}
标记元素后，仅更改元素的状态和属性。但删除后，您将使用
render
整个列表重新创建，并且在
render
中未选中
rendering
参数

您的渲染应该是：

render（）{
this.ul.innerHTML=“”；
this.tasks.forEach（（任务）=>{
const li=document.createElement（“li”）；
const cb=document.createElement（“输入”）；
cb.type=“复选框”；
cb.addEventListener（“单击”，（e）=>{
这项任务（e）；
});
李.儿童（cb）；
//未检查渲染
如果（任务已选中）{
li.style.textdearching=“行通过”；
cb.checked=‘checked’；
}
li.append（document.createTextNode（任务））；
const btn=document.createElement（“按钮”）；
李.儿童(btn);；
btn.textContent=“删除”；
添加（“删除”）；
btn.addEventListener（“单击”，（e）=>{
这是删除任务（e）；
});
本.ul.儿童（李）；
});
}
这是因为你没有跟踪完成了哪些任务，你只是在推字符串。对于
createTask
方法，您需要推送一个具有done属性的对象，以指示哪些任务已经这样完成

 createTask(task) {
 if (task.trim().length === 0) {
  return;
 }
 this.tasks.push({title: task, done: false});
 this.render();
 }

更新渲染以说明已完成的任务

render() {
this.ul.innerHTML = "";
this.tasks.forEach((task) => {
  const li = document.createElement("li");
  const cb = document.createElement("input");
  cb.type = "checkbox";
  cb.addEventListener("click", (e) => {
    this.markTask(e);
  });
  li.appendChild(cb);

  li.append(document.createTextNode(task.title));

  const btn = document.createElement("button");
  li.appendChild(btn);
  btn.textContent = "Delete";
  btn.classList.add("remove");
  btn.addEventListener("click", (e) => {
    this.deleteTask(e);
  });
  this.ul.appendChild(li);

   if (task.done) {
    cb.checked = true;
    li.style.textDecoration = "line-through";
   } else {
    cb.checked = false;
    li.style.textDecoration = "none";
   }
 });
}

在构造函数中，更新tasks变量以查看其是否有效

constructor() {
this.input = document.getElementById("input");
this.ul = document.getElementById("ul");
this.form = document.getElementById("form");
this.tasks = [{title: 'mill', done: true}, {title: 'jus', done: false}];
this.registerEvent();
}

希望你能了解大概情况。我不会在
markTask
上完成整个实现，因为这应该足以让您了解解决方案应该是什么。祝你好运。
这是因为你没有跟踪完成了哪些任务，你只是在推绳子。对于
createTask
方法，您需要推送一个具有done属性的对象，以指示哪些任务已经这样完成

 createTask(task) {
 if (task.trim().length === 0) {
  return;
 }
 this.tasks.push({title: task, done: false});
 this.render();
 }

更新渲染以说明已完成的任务

render() {
this.ul.innerHTML = "";
this.tasks.forEach((task) => {
  const li = document.createElement("li");
  const cb = document.createElement("input");
  cb.type = "checkbox";
  cb.addEventListener("click", (e) => {
    this.markTask(e);
  });
  li.appendChild(cb);

  li.append(document.createTextNode(task.title));

  const btn = document.createElement("button");
  li.appendChild(btn);
  btn.textContent = "Delete";
  btn.classList.add("remove");
  btn.addEventListener("click", (e) => {
    this.deleteTask(e);
  });
  this.ul.appendChild(li);

   if (task.done) {
    cb.checked = true;
    li.style.textDecoration = "line-through";
   } else {
    cb.checked = false;
    li.style.textDecoration = "none";
   }
 });
}

在构造函数中，更新tasks变量以查看其是否有效

constructor() {
this.input = document.getElementById("input");
this.ul = document.getElementById("ul");
this.form = document.getElementById("form");
this.tasks = [{title: 'mill', done: true}, {title: 'jus', done: false}];
this.registerEvent();
}

希望你能了解大概情况。我不会在
markTask
上完成整个实现，因为这应该足以让您了解解决方案应该是什么。祝你好运。
如果可以的话，我已经修改了你的代码

您需要的技巧是事件委派：
单击子元素也是单击其父元素。我们将事件侦听器放在父元素上，并查看它发生在哪个子元素上。
就你而言，这个