如何选中复选框以将类添加到列表项[[[[[[[[[[[[[[

Question

我想选中一个复选框以将类添加到列表项。此列表项将是一个待办事项列表。并且添加的类将以低不透明度设置列表项的样式，以指示该任务的完成。

Answer 1

我想你想做这样的事情：

let list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

  user-select: none;
}


ul li.checked {
  opacity: 0.3;
  text-decoration: line-through;
}

<ul id="myUL">
  <li>Todo1</li>
  <li class="checked">Todo2</li>
  <li>Todo3</li>
</ul>

这可能不是最好的解决方案，但对于一个简单的待办事项应用程序来说已经足够了。

可以在此处找到完整的待办事项应用程序。

Answer 2

1. 首先，我看到您已在待办事项容器 div 中添加了

   "div-1"

   类，因此我假设您希望下一个添加的待办事项具有

   "div-2"

   类，然后是

   "div-3"

   ， 等等。正确的？如果是这样，那就是第一个问题。目前，所有生成的待办事项都将具有相同的

   "div-1"

   类，因此在

   generateToDo

   函数中，您必须首先为每个新生成的待办事项增加类名称。

2. 然后，如果我理解正确的话，你想在一个名为

   complete()

   的函数中保存完成待办事项的逻辑。您需要将

   input.addEventListener('click', complete)

   移至

   generateToDo

   函数，以便每个新创建的待办事项都会监听

   'click'

   事件。

3. 最后，我们到达

   complete()

   函数：

function complete (e) {
  const targetContainer = e.target.parentNode;
  const todo = targetContainer.querySelector('li') // I recommend adding a class name to the to-do li item to avoid targeting the wrong li element
  todo.classList.add('checked')
}

4. 现在我们正在向待办事项的 li 元素添加一个

   "checked"

   类，您可以使用 Codigo de Senior 建议的样式：

ul li.checked {
  opacity: 0.3;
  text-decoration: line-through;
}