Question

我正在尝试创建一个普通的JS做应用程序。用户可以输入待办事项，然后单击它们以将其标记为完成。但是由于某种原因，“完整”类正在切换。它可以切换以前存在的 li 项目，但不能切换到新创建的 li

const li = document.querySelectorAll('li');
const btn = document.querySelector('button');
var list = document.getElementById('container');
const inputTxt = document.querySelector('input');
const val = document.getElementById('item');



//add todo function
function btnClick() {
  var inputText = inputTxt.value;
  var entry = document.createElement('li');
  entry.className = "incomplete";
  entry.appendChild(document.createTextNode(inputText));
  list.appendChild(entry);
}

function ToggleClass(event) {
  var check = event.target;
  var find = check.closest('li');
  this.classList.toggle('complete');
  console.log(find);
}


btn.addEventListener('click', btnClick);
li.forEach(item => item.addEventListener('click', ToggleClass));

.todo {
  text-align: center;
}

ul {
  list-style: none;
}

.complete {
  color: green;
}

li:hover {
  cursor: pointer;
}

.complete {
  position: relative;
}

.complete:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

<body>

  <section class="todo">
    <div class="wrap">
      <input type="text" name="todo_text" id="item">
      <button>Add item</button>
      <ul id="container">
        <li class="todo_item complete">Some todo item text</li>
        <li class="todo_item complete">Some todo item text</li>
        <li class="todo_item incomplete">Some todo item text</li>

      </ul>
    </div>
  </section>

我的猜测，可能是创建textNode要做的事情。

Answer 1

您需要将事件侦听器添加到btnClick()函数内部新创建的元素中，否则新元素将没有侦听器。

所以：

function btnClick() {
  var inputText = inputTxt.value;
  var entry = document.createElement('li');
  entry.className = "incomplete";
  entry.addEventListener('click', ToggleClass);
  entry.appendChild(document.createTextNode(inputText));
  list.appendChild(entry);
}

Answer 2

改为在ul上使用事件委派（目前，监听器位于每个按钮上，但是在添加项目时您不会添加新的监听器）：

const li = document.querySelectorAll('li');
const btn = document.querySelector('button');
var list = document.getElementById('container');
const inputTxt = document.querySelector('input');
const val = document.getElementById('item');

list.addEventListener('click', (e) => {
  const { target } = e;
  if (target.tagName !== 'LI') return;
  target.classList.toggle('complete');
});

//add todo function
function btnClick() {
  var inputText = inputTxt.value;
  var entry = document.createElement('li');
  entry.className = "incomplete";
  entry.appendChild(document.createTextNode(inputText));
  list.appendChild(entry);
}

btn.addEventListener('click', btnClick);

.todo {
  text-align: center;
}

ul {
  list-style: none;
}

.complete {
  color: green;
}

li:hover {
  cursor: pointer;
}

.complete {
  position: relative;
}

.complete:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

<body>

  <section class="todo">
    <div class="wrap">
      <input type="text" name="todo_text" id="item">
      <button>Add item</button>
      <ul id="container">
        <li class="todo_item complete">Some todo item text</li>
        <li class="todo_item complete">Some todo item text</li>
        <li class="todo_item incomplete">Some todo item text</li>

      </ul>
    </div>
  </section>

香草JS中的切换类无法正常工作

2 个答案: