过滤器在 vanilla javascript 小应用程序（待办事项列表）中有错误

Question

所以我正在使用 vanilla javascript 构建一个小应用程序，这个应用程序是一个具有某些功能的待办事项列表，当我按下这里的过滤器时出现错误 javascript代码：

function filterTodo(e) {
  const todos = todoList.childNodes;
  // console.log(todos);
  todos.forEach(function(todo) {
    switch (e.target.value) {
      case "all":
        todo.style.display = "flex";
        break;
      case "completed":
        if (todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
      case "uncompleted":
        if (!todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
    }
  });
}

<form>
  <input type="text" class="todo-input">
  <button class="todo-button" type="submit">
            <i class="fas fa-plus-square"></i>
        </button>
  <div class="select">
    <select name="todos" class="filter-todo">
      <option value="all">All</option>
      <option value="completed">Completed</option>
      <option value="uncompleted">Uncompleted</option>
    </select>
  </div>
</form>
<div class="todo-container">
  <ul class="todo-list">
  </ul>
</div>

这是错误的图片： [当我按下过滤器时，这个错误不断出现][1] [1]: https://i.stack.imgur.com/63CXI.png

我找不到我的错误，但我认为 (todo) 在匿名函数中没有被识别或者 forEach 函数有错误。请帮忙，谢谢。

注意：这是 github 上整个应用程序的 url：https://github.com/Shtaiwee1/Web_fund_additional_apps/tree/master/To_do_list

Answer 1

您可以只更改列表的 class（<ul> 而不是 <li>），让 CSS 级联处理其余部分。 .forEach() 绝对不需要，也不需要任何数组或 NodeList。另外，你应该总是在 switch() 中有一个 default——在这个例子中，default 从 <ul> 中删除了两个 class（不管是否class 实际上存在或不存在，所以涵盖两者是 100% 不涉及计算）。顺便说一句，在这种情况下“点击”是可以的，但你应该使用 "change" event 因为它是为像 <select>.

这样的表单控件设计的

const form = document.forms[0];

const select = form.elements.filter;

select.addEventListener('change', filterList);

function filterList(e) {
  const select = e.target;
  const list = document.querySelector('.list');

  if (select.matches('#filter')) {
    switch (select.value) {
      case 'done':
        list.classList.remove('open');
        list.classList.add('done');
        break;
      case 'open':
        list.classList.remove('done');
        list.classList.add('open');
        break;
      default:
        list.classList.remove('done');
        list.classList.remove('open');
        break;
    }
  }
};

li.open::before {
  content: '⬛'
}

li.done::before {
  content: '☑️'
}

.list.open li.done {
  display: none
}

.list.done li.open {
  display: none
}

<form>
  <select id='filter'>
    <option default value=''>All</option>
    <option value='done'>Completed</option>
    <option value='open'>Uncompleted</option>
  </select>
  <ul class='list'>
    <li class='done'>Task</li>
    <li class='open'>Task</li>
    <li class='done'>Task</li>
    <li class='done'>Task</li>
    <li class='open'>Task</li>
    <li class='done'>Task</li>
    <li class='open'>Task</li>
    <li class='open'>Task</li>
    <li class='done'>Task</li>
  </ul>
</form>

Answer 2

对于 show/hide 您的“待办事项”列表，您可以通过使用数据属性然后切换它们来简化它。在这里，我将一个用于“动作”状态，另一个用于 show/hide 基于此。

function filterTodo(event) {
  event.preventDefault();
  let todoList = document.querySelector(".todo-list");
  let todoSelect = document.querySelector(".filter-todo");
  const todos = todoList.querySelectorAll(".todo-item");
  let val = event.target.value;
  todos.forEach(function(todo) {
    todo.dataset.status = todo.dataset.action === val && val !== "all" ? val : val === "all" ? "" : "none";
  });
}
let b = document.querySelector(".todo-button");
b.addEventListener('click', filterTodo);
let sel = document.querySelector(".filter-todo");
sel.addEventListener('change', filterTodo);

.todo-container,
.todo-container .todo-list {
  border: solid 1px lime;
  display: flex;
  flex-direction: column;
}

.todo-item {
  display: flex;
  background-color: #40404010;
  border: 1px solid #40404040;
  margin: 0.5em;
}

.todo-item[data-status="completed"] {
  background-color: #10401010;
}

.todo-item[data-action="completed"]::before {
  content: "DONE: ";
  color: green;
}

.todo-item[data-status="completed"] span {
  color: lime;
}

.todo-item[data-status="uncompleted"] {
  background-color: #40101010;
  text-decoration-line: underline overline;
}

.todo-item[data-status="none"] {
  display: none;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

.todo-item[data-status=""] {
  text-decoration-color: cyan;
  text-decoration-style: solid;
  text-decoration-line: underline;
}

<form>
  <input type="text" class="todo-input" />
  <button class="todo-button" type="submit">
     <i class="fas fa-plus-square">[+]</i>
  </button>
  <div class="select-container">
    <select name="todos" class="filter-todo">
      <option value="all">All</option>
      <option value="completed">Completed</option>
      <option value="uncompleted">Uncompleted</option>
    </select>
  </div>
</form>
<div class="todo-container">
  <ul class="todo-list">
    <li class="todo-item">Get a new cat: I have no status or action</li>
    <li class="todo-item" data-action="completed" data-status="completed">Get a new Hippo</li>
    <li class="todo-item" data-action="uncompleted" data-status="uncompleted">Send MORE money!</li>
    <li class="todo-item" data-status="none">Send me money! I was hidden?</li>
    <li class="todo-item" data-status="fish">Send me money! fish?</li>
    <li class="todo-item" data-status="">Get to the bank NOW!</li>
  </ul>
</div>

过滤器在 vanilla javascript 小应用程序（待办事项列表）中有错误

filter has an error in vanilla javascript small app (to do list)

javascript

foreach

project