如何在纯 JavaScript 的这个简单的待办事项应用程序中改进过滤
我正在开发我的简单待办事项应用程序（可以将任务添加到列表中，删除它并搜索和过滤它）。我有一个问题，因为当我在搜索输入中写一些东西时，一切都很好（过滤效果很好）。但是当我删除字母（退格）或删除所有文本时，我有没有任务的空列表。你能改进我的代码吗？这是我的代码：
我最近遇到了一个高尔夫卡塔，要求检查一个字母是否大写，不超过 9 个字符。
用户的回答有点吓人（这些例子也适用>于相反的顺序）：
f=s=>s<{}
f=c=>c<{}
f=_=>_<f
f=Z=>Z<f
某些变量名称不适用于f：
f=a=>a<f
f=z=>z<f
将函数与基本字符串进行比较时，<and>运算符为何以及如何工作？也许指针比较？
自己试试：
// working
f1=s=>s<{}
f2=c=>c<{}
f3=_=>_<f3
f4=Z=>Z<f4
// not working
f5=s=>s<f5
console.log('f1', f1('A'))
console.log('f1', f1('a'))
console.log('f2', f2('A'))
console.log('f2', f2('a'))
console.log('f3', f3('A'))
console.log('f3', f3('a'))
console.log('f4', f4('A'))
console.log('f4', f4('a'))
console.log('f5', f5('A'))
console.log('f5', f5('a'))
达令说浏览 157回答 1
1回答
-
哔哔one
问题是你覆盖了ulwith的内容ul.textContent = '';一种快速的方法是.hidden在您的 中有一个类，如果它们与搜索输入不匹配css，则将其添加到lis 以隐藏不匹配的结果：const addInput = document.querySelector('.add input');const searchInput = document.querySelector('.search input');const addButton = document.querySelector('.add button');const ul = document.querySelector('ul');const taskNumber = document.querySelector('h1 span');let tasks = 0;const addTask = (e) => { e.preventDefault(); tasks++; let task = addInput.value; if (task === '') return; const li = document.createElement('li'); li.innerHTML = task + " <button> X </button>" ul.appendChild(li); // console.log(task); addInput.value = ''; taskNumber.textContent = tasks; li.querySelector('button').addEventListener('click', deleteTask);}const searchTask = (e) => { const text = e.target.value.toLowerCase(); let lis = [...document.querySelectorAll('li')]; // lis = lis.filter(li => li.textContent.toLowerCase().includes(text)); // ul.textContent = ''; lis.forEach(li => li.textContent.toLowerCase().includes(text) ? li.classList.remove('hidden') : li.classList.add('hidden'));}const deleteTask = (e) => { e.target.parentNode.remove(); tasks--; taskNumber.textContent = tasks;}addButton.addEventListener('click', addTask)searchInput.addEventListener('input', searchTask);.hidden { display: none;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>To-do app</title></head><body> <form class="add" action=''> <input type="text"> <button>Add</button> </form> <h1>Numbers of tasks: <span>0</span></h1> <ul></ul> <form class="search" action=''> <input type="search" placeholder="search"> </form></body>或者，有一个元素数组，您可以在其中添加 new li，在删除时将其从该数组中删除，并使用它来过滤搜索结果：const addInput = document.querySelector('.add input');const searchInput = document.querySelector('.search input');const addButton = document.querySelector('.add button');const ul = document.querySelector('ul');var elements = [];const taskNumber = document.querySelector('h1 span');let tasks = 0;const addTask = (e) => { e.preventDefault(); tasks++; let task = addInput.value; if (task === '') return; const li = document.createElement('li'); li.innerHTML = task + " <button id=" + tasks + "> X </button>" li.id = tasks; ul.appendChild(li); // console.log(task); addInput.value = ''; taskNumber.textContent = tasks; li.querySelector('button').addEventListener('click', (e) => deleteTask(e, tasks)); elements.push(li);}const searchTask = (e) => { const text = e.target.value.toLowerCase(); let lis = [...document.querySelectorAll('li')]; lis = elements.filter(li => li.textContent.toLowerCase().includes(text)); ul.textContent = ''; lis.forEach(li => ul.appendChild(li));}const deleteTask = (e, id) => { e.target.parentNode.remove(); elements = elements.filter(el => { return +el.id !== id; }) tasks--; taskNumber.textContent = tasks;}addButton.addEventListener('click', addTask)searchInput.addEventListener('input', searchTask);.hidden { display: none;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>To-do app</title></head><body> <form class="add" action=''> <input type="text"> <button>Add</button> </form> <h1>Numbers of tasks: <span>0</span></h1> <ul></ul> <form class="search" action=''> <input type="search" placeholder="search"> </form></body>
随时随地看视频慕课网APP
相关分类
JavaScript