如何使用纯 javascript 定位 non-unique、DOM 中动态生成的元素？

Question

我有一个 input 字段，它将输入的字符串推入一个数组，然后从数组中的每个 object 生成一个 <li>。我还在生成的每个列表项中添加了一个点击监听器。

点击监听器和动态生成的列表项按预期工作，除了我唯一能让点击监听器的功能做的是 console.log，因为我不知道如何定位列表项刚刚被点击。

我想针对单击的项目添加一个 class，这会将其 text-decoration 更改为 line-through。我已经准备好了一切，我只需要弄清楚如何使用 DOM.

定位点击的项目

我试过document.querySelectorAll("li")，但那只有returns一个Nodelist。我也尝试了我能想到的所有其他 DOM 方法，我尝试在调用函数时将 this 作为参数传递给函数。没有办法使每个生成的列表项都是唯一的，它们都具有相同的 class 和相同的 parent.

如果我通过说 document.getElementByTagName("ul").firstChild.classList.add("strikethrough"); 来定位第一个 child 一切正常，这意味着代码没有错误，但是当我有 10 个列表项并且单击第 4 个项目时，这将不起作用.

我想包括我的整个代码，但我不想混淆问题，因为一行一行地发生了很多事情，每个函数都在处理多个进程。再一次，我想重申一切正常，我只是缺少最后的 link，这是如何定位这个 non-unique，动态生成的元素，刚刚用 DOM 单击（或类似的）。

这是有问题的片段，它应该包含您需要了解的有关代码的所有信息：

let plannerItems = [];
let backwardsArray = plannerItems.reverse();

function createList() {
  for (var i = 0; i < backwardsArray.length; i++) {
    var plannerItem = backwardsArray[i];
    var nextItem = document.createElement("li");
    nextItem.innerHTML= plannerItem;
    nextItem.classList.add("listItems");
    nextItem.addEventListener("click", function(event) {
      crossOff();
    });
    document.getElementById("list").prepend(nextItem);
  };
};

function crossOff() {
  document.getElementById("list").firstChild.classList.add("strikethrough");
   ////This is where I would put my DOM method....If I had one... ////
};

因此，如您所见，注释上方的最后一行代码是我需要用正确的 DOM 方法替换的代码。我也试过 nextItem.classlist.add("strikethrough"); 但这只会将 class 添加到第一个 child，而不是单击的文本。

Answer 1

您可以使用 event.currentTarget 访问从事件中单击的元素，您可以将其传递到 crossOff():

let plannerItems = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'];
let backwardsArray = plannerItems.reverse();

function createList() {
  for (var i = 0; i < backwardsArray.length; i++) {
    var plannerItem = backwardsArray[i];
    var nextItem = document.createElement("li");
    nextItem.innerHTML= plannerItem;
    nextItem.classList.add("listItems");
    nextItem.addEventListener("click", function(event) {
      crossOff(event.currentTarget);
    });
    document.getElementById("list").prepend(nextItem);
  };
};

function crossOff(item) {
  item.classList.add("strikethrough");
};

createList();

.strikethrough {
  text-decoration: line-through;
}

li {
  cursor: default;
}

<ul id="list">
</ul>

如何使用纯 javascript 定位 non-unique、DOM 中动态生成的元素？

How to target non-unique, dynamically generated elements in the DOM with plain javascript?

javascript

dom

event-listener

dynamically-generated