javascript - 在数组中搜索字符串并将它们添加到类中

Question

正在处理简单的待办事项列表，但我一直在列表功能上搜索任务。用户正在输入字段中输入内容，我想将其与列表中的位置进行比较，如果适合，则给它类 .active (它只是 font-weigth:bold;)，如果不再适合，则删除该类。目前，仅当输入字段为空并且我不知道如何编辑代码以使其按我想要的方式工作时，它才会删除类。有任何想法吗？ https://github.com/eryk-slowinski/to-do-list

const inputAdd = document.querySelector('div.add input');
const tasksList = document.querySelector('.taskslist');

const addTask = () => {
    if (inputAdd.value) {
        const li = document.createElement('li');
        const deleteButton = document.createElement('button');
        li.textContent = inputAdd.value;
        deleteButton.textContent = '\xD7';
        tasksList.appendChild(li).appendChild(deleteButton);
    } else return;
}

tasksList.onclick = (e) => {
    if (e.target.tagName !== 'BUTTON') return;
    else e.target.parentNode.remove();
}

const searchInList = (e) => {
    const searchValue = e.target.value.toLowerCase();
    const liList = [...document.querySelectorAll('ul.taskslist li')].filter(li => li.textContent.toLowerCase().includes(searchValue));
    if (searchValue === "") liList.forEach(index => index.classList.remove('active'));
    else liList.forEach(index => index.classList.add('active'));
}

document.querySelector('div.add button').addEventListener('click', addTask);
document.querySelector('div.search input').addEventListener('input', searchInList);

Answer 1

现在，您只需在 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');
      }
    });
}