Question

我已经建立了此待办事项网站： https://mickanie.github.io/toDoList/ 但是我注意到，当我将自己的项目添加到默认项目时，它只允许我划掉列表中的所有其他项目。

image更确切地说，我无法在随附的图像上划掉item1，ite3和item5。有谁知道这是为什么以及如何解决？

用于从列表中划掉项目的JavaScript函数：

const setDoneOnOff = () => {
li = document.querySelectorAll("li");
for (let i=0; i<li.length; i++) {
    li[i].addEventListener("click", function(f) {
        f.currentTarget.classList.toggle("done");
    });
}

我什至不知道问题是否出在那（网站来源中的整个代码）。

Answer 1

我不明白为什么人们需要使用Javascript做简单的事情。

信息：您也可以将其包装成div，而不必是表格。

<form>
 <input type="checkbox" id="abc"><label for="abc">abc</label> 
 <input type="checkbox" id="123"><label for="123">123</label>
 <input type="checkbox" id="omg"><label for="omg">omg</label>
</form>

<style>
form{
  display:block;
}

input[type="checkbox"]:checked + label{
/* Target only input with a type of checkbox.
 * If the type of checkbox is checked, cross the input and label.
 * Keep in mind that you can NOT cross a checkbox.
 * But it must be there as a "event handler".
 * The plus is a selector that means something like "and" label
 * The input is the checkbox that toggles "checked" and the label is the actual text that gets crossed. */
  text-decoration: line-through;
}
</style>

jsfiddle

如果您不希望复选框将input[type="checkbox"]{ display:none }添加到样式中。

jsfiddle

Answer 2

您应该在create element方法中调用setDoneOnOff方法

const createLiElement = () => {

	createListElement();
	setDoneOnOff();
	addNewDeleteButton();
	showDeleteButton();
	
}

Answer 3

将事件侦听器分配移动到createListElement函数：

const createListElement = () => {
  let li = document.createElement("li");

  ...

  li.addEventListener("click", function(f) {
     f.currentTarget.classList.toggle("done");
  });

  ...

}

JavaScript待办事项清单删除所有其他项目

3 个答案: