javascript - 我无法在点击时为文本着色

Question

当您单击某个类别时，其名称应变为红色。但这仅适用于预渲染类别，如果您添加一个新类别(它适用于输入和“添加 btn”)，则事件处理程序不起作用，文本不会发生任何情况

// * Adding active class for the cat
const addActiveClass = (elem) => {
  elem.classList.add("active");
};
// ! Removing active class
const removeActiveClass = (catArr) => {
  Array.from(catArr).forEach((elem) => {
    elem.classList.remove("active");
  });
};

Array.from(document.getElementsByClassName("categories__text")).forEach(
  (elem) => {
    elem.addEventListener("click", (e) => {
      removeActiveClass(document.getElementsByClassName
      ("categories__text"));
      addActiveClass(e.target);
    });
  }
);
console.log(Array.from(document.getElementsByClassName("categories__text")));

<ul class="categories__list">
  <li class="categories__item">
    <p class="categories__text active">All</p>
  </li>
</ul>

Answer 1

您的问题源于动态添加的元素没有与最初存在的元素相同的事件监听器。该解决方案涉及使用事件委托(delegate)，将事件监听器附加到父元素，然后验证单击的元素是否符合您的要求。看这里:

// Adding and removing active class
const toggleActiveClass = (elem) => {
  Array.from(document.getElementsByClassName("categories__text")).forEach((el) => {
    el.classList.remove("active");
  });
  elem.classList.add("active");
};

// Here Goes Event delegation
document.querySelector('.categories__list').addEventListener('click', (e) => {
  if (e.target && e.target.matches(".categories__text")) {
    toggleActiveClass(e.target);
  }
});

这样，即使稍后添加的元素也将具有单击功能，因为事件监听器位于父元素上，而不是单个元素上。

希望这有帮助!