Javascript 在数组中搜索字符串并将其添加到类中

处理简单的待办事项列表，我一直坚持在列表中搜索任务。用户正在输入字段中键入内容，我想将其与列表中的位置进行比较，如果有合适的地方，请将其设置为类；如果它不再合适，请删除该类。现在，它只是在输入字段为空时删除类，我不知道如何编辑代码，使其按我所希望的方式工作。有什么想法吗

现在，仅当searchValue==时才删除.active。您需要在状态更改时删除.active。您可以迭代这些项，并决定删除或添加每个项的类：

const searchInList = (e) => {
  const searchValue = e.target.value.trim().toLowerCase();

  const liList = document.querySelectorAll('ul.taskslist li')
    .forEach(li => { // iterate all items 
      if (searchValue === '' || !li.textContent.toLowerCase().includes(searchValue)) { // if search term is empty or not included in li text
        li.classList.remove('active');
      } else {
        li.classList.add('active');
      }
    });
}

---

在这段代码中，仅当searchValue为空时才删除该类

if (searchValue === "") liList.forEach(index => index.classList.remove('active'));
    else liList.forEach(index => index.classList.add('active'));

要将此删除行移到函数顶部，只需在搜索框中键入每个字符后删除所有活动类，然后每次将其添加回新匹配项：

const searchInList = (e) => {
   [...document.querySelectorAll('ul.taskslist li')].forEach(li => li.classList.remove('active'));
   .....
   liList.forEach(index => index.classList.add('active'));
}

const inputAdd=document.querySelector'div.add input'； const tasksList=document.querySelector'.tasksList'； const addTask==>{ 如果输入add.value{ const li=document.createElement'li'； constdeletebutton=document.createElement'button'； li.textContent=inputAdd.value； deleteButton.textContent='\xD7'； tasksList.appendChildli.AppendChildDelete按钮； }否则返回； } tasksList.onclick=e=>{ 如果e.target.tagName！==“按钮”返回； 否则e.target.parentNode.remove； } const searchInList=e=>{ […document.queryselectoral'ul.taskslist li'].forEachli=>li.classList.remove'active'； const searchValue=e.target.value.toLowerCase； const liList=[…document.queryselectoral'ul.taskslist li'].filterli=>li.textContent.toLowerCase.includeSearchValue； liList.forEachindex=>index.classList.add'active'； } document.querySelector'div.add button'。addEventListener'click'，addTask； document.querySelector'div.search input'。addEventListener'input'，searchInList； 李：很活跃{ 颜色：红色； } 要做的事情 添加任务 添加 搜索任务

---

请添加一些相关的HTMLIt作品：我还添加了if searchValue！==在searchInList函数的最后一个通道之前。当输入字段为空时，它正在清除类。@ErykSłowiński捕捉得很好！

const searchInList = (e) => {
   [...document.querySelectorAll('ul.taskslist li')].forEach(li => li.classList.remove('active'));
   .....
   liList.forEach(index => index.classList.add('active'));
}