在 JavaScript 中，一些图标点击监听器可以工作，而另一些则不会以一种奇怪的方式工作

Question

我正在开发待办事项列表应用程序。我创建了一个 li 项目并在其中放置了 2 个图标和一个 p 标签。其中一个图标是编辑，它工作得很好，我用 p 标签替换了一个输入，这很好，但问题是我左侧的 check 图标工作一半。如果我一个一个地添加 li 项目，检查图标工作得很好，但是当我添加 5 或 10 个项目然后尝试检查图标时，其中一些工作正常，而其他的则不工作。我尝试用 span 标签替换 i 标签，但没有结果。就像每一秒 li 标签都会阻止前一个标签。我需要帮助，我将不胜感激。我将在下面添加唯一不起作用的图标。

const DONE = document.getElementsByClassName('far fa-circle');
const LINE = document.getElementsByClassName('list-points');
const EDIT = document.getElementsByClassName('far fa-edit');
const CONTAINER = document.getElementById("actual-container");
const BUTTON = document.getElementById("list-adder");
BUTTON.addEventListener('click', nameList);

function nameList() {
  const item1 = document.createElement("i");
  item1.className = "far fa-circle";
  const paraph1 = document.createElement("p");
  paraph1.className = "list-points";
  paraph1.innerText = "Fresh again!";
  const item2 = document.createElement("i");
  item2.className = "far fa-edit";
  const myList = document.createElement("li");
  myList.appendChild(item1);
  myList.appendChild(paraph1);
  myList.appendChild(item2);
  CONTAINER.appendChild(myList);
  for (let i = 0; i < DONE.length; i++) {
    DONE[i].addEventListener('click', function() {
      DONE[i].classList.toggle('fa-times-circle');
    })
  }
}

<head>
  <title>Debug</title>

  <script src="https://kit.fontawesome.com/ae444f90db.js" crossorigin="anonymous"></script>
</head>

<body>

  <div>
    <ul id="actual-container"></ul>
  </div>

  <button id="list-adder">ME</button>

</body>

Answer 1

错误在您的点击处理程序的分配范围内。

你会

for (let i = 0; i < DONE.length; i++) {
    DONE[i].addEventListener('click', function() {
        DONE[i].classList.toggle('fa-times-circle');
    });
}

这将为您保留在 DONE 中并具有此行为的所有元素添加一个切换事件处理程序。

单击按钮：创建元素A，将单击处理程序分配给A
- （A 有一个处理程序）有效
单击按钮：创建元素 B，将单击处理程序分配给 A 和 B
- （A 有两个处理程序）不起作用
- （B 有一个处理程序）有效
单击按钮：创建元素 C，将单击处理程序分配给 A、B 和 C
- （A 有三个处理程序）有效
- （B 有两个处理程序）不起作用
- （C 有一个处理程序）有效

因为您在点击处理程序中使用了 toggle，所以处理程序相互“取消”，因为切换某项两次会使您处于初始状态。

我猜你没有意识到 getElementByClassName returns 一个 live 列表，所以你的变量 DONE 会在您向 DOM 添加新元素时更改。我也不知道这一点，所以谢谢你的问题:) 请参阅此处以获得更好的解释：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

在您的代码中，只需将处理程序添加到您创建的一个元素（item1 是您代码中的图标元素）就足够了：

item1.addEventListener('click', function() {
    item1.classList.toggle('fa-times-circle');
});

在 JavaScript 中，一些图标点击监听器可以工作，而另一些则不会以一种奇怪的方式工作

Some of Icon click listeners work and some not in a strange way in JavaScript

javascript

html

icons

listener