javascript - 单击时将类添加到 HTML 列表中的一个且只有一个元素

Question

我有一个这样的列表:

 <ul>
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
 </ul>

而且我需要将事件的类单独添加到每个项目中，然后单击前一个项目将其删除。
类似于这个问题 Vanilla JS remove class from previous selection但是由于旧的浏览器兼容性，我需要使用 For 循环而不是 ForEach。
我一直在尝试使该答案适应我的示例:

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  item.addEventListener("click", addActiveClass);

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    item.addEventListener("click", removeClass);
  }
}

function removeClass(e) {
  e.target.classList.remove("active");
}

function addActiveClass(e) {
  e.target.classList.add("active");
}

但它仍然没有按预期工作:(

Answer 1

我假设您需要从其余项目中删除事件类，然后更新正确的项目。但是，我不确定 classList在您寻求支持的旧版浏览器中可用。您应该查看 the polyfill对于年长的弓箭手。

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  item.addEventListener("click", changeActiveClass);
}

function changeActiveClass(e)
{
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    item.classList.remove('active');
  }
  e.target.classList.add('active');
}