javascript - 将切换类列表添加到附加的 child

Question

我正在尝试在附加的 child 上切换 classList；我已经获得了可以在现有的基础上工作的切换，但是当我通过用户输入添加时，它不会对我可能如何执行此操作提供任何提示？因为到目前为止我不知所措，请帮忙!

var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var input = document.getElementById("userinput");
var list = document.getElementsByTagName("li");

function listDone() {}

function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeyPress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeyPress);

function listDoneToggle() {
for (i = 0; i < list.length; i++) {
list[i].addEventListener("click", function() {
this.classList.toggle("done");
});
}
}
listDoneToggle();

Answer 1

您可以简单地将事件监听器添加到您正在创建的元素中。首先，您可以将事件处理程序提取到它自己的命名函数中，这样它就可以在多个地方使用，并且只需要维护一个函数以备日后需要更改时使用:

function applyToggle() {
  this.classList.toggle("done");
}

然后，像这样编辑您的代码:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); // <--
  // ...
}

function listDoneToggle() {
  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", applyToggle); // <--
  }
}

可选地，如果您想稍后重用 list 变量并拥有所有元素(包括您动态创建的元素)，您也可以将它们插入此列表:

function createListElement() {
  var li = document.createElement("li");
  li.addEventListener("click", applyToggle); 
  Array.prototype.push.apply(list, li); // <--
  // ...
}