时间戳

首页 > 解决方案 > 无法单独从列表中划掉项目

javascript - 无法单独从列表中划掉项目

问题描述

我一直在尝试构建一个待办事项列表应用程序，当我尝试单击列表上的任意位置时，总是第一项从列表中划掉，而不是被点击的那一项。以及在下面的 CSS 代码中应用 CSS 样式的最佳方式是什么？
我已经发布了下面的代码。

const container = document.querySelector('.container');
const list = document.querySelector('#list');

const textBox = document.querySelector('#textBox');
const submit = document.querySelector('#submit');
const data = document.querySelector('.data');
const close = document.querySelector('.close');

const li = document.querySelector('LI');

list.addEventListener('click', function (e) {
  if (e.target ) {
    li.classList.add('task');
  }
});

<div class="container">
  <h1>To Do</h1>
  <div class="data">
    <ul id="list">
      <li>Meet Denise<span class="close"></span></li>
      <li><span class="check"></span>Grocery</li>
      <li>Book Appointment</li>
      <li>Watch GOT</li>
      <li>Book Flight</li>
      <li>Buy Ipad</li>
      <li>Pick up kids</li>
      <li>Complete Homework</li>
    </ul>
  </div>

标签： javascriptdom

解决方案

const li = document.querySelector('LI');

此行选择li整个文档中第一次出现的标记。

您已经e在 addEventListener 处理程序中获取事件并检查目标。更改您的代码以将类添加到e.target：

const list = document.querySelector('#list');

list.addEventListener('click', function (e) {
  if (e.target) {
    e.target.classList.add('task')
  }
})
.task {
  text-decoration: line-through;
}
<div class="container">
  <h1>To Do</h1>
  <div class="data">
    <ul id="list">
      <li>Meet Denise</li>
      <li>Grocery</li>
      <li>Book Appointment</li>
      <li>Watch GOT</li>
      <li>Book Flight</li>
      <li>Buy Ipad</li>
      <li>Pick up kids</li>
      <li>Complete Homework</li>
    </ul>
  </div>

您也可以删除未使用的选择器。

推荐阅读