猿问

如何在纯 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) => {&nbsp; e.preventDefault();&nbsp; tasks++;&nbsp; let task = addInput.value;&nbsp; if (task === '') return;&nbsp; const li = document.createElement('li');&nbsp; li.innerHTML = task + " <button> X </button>"&nbsp; ul.appendChild(li);&nbsp; // console.log(task);&nbsp; addInput.value = '';&nbsp; taskNumber.textContent = tasks;&nbsp; li.querySelector('button').addEventListener('click', deleteTask);}const searchTask = (e) => {&nbsp; const text = e.target.value.toLowerCase();&nbsp; let lis = [...document.querySelectorAll('li')];&nbsp; // lis = lis.filter(li => li.textContent.toLowerCase().includes(text));&nbsp; // ul.textContent = '';&nbsp; lis.forEach(li => li.textContent.toLowerCase().includes(text) ? li.classList.remove('hidden') : li.classList.add('hidden'));}const deleteTask = (e) => {&nbsp; e.target.parentNode.remove();&nbsp; tasks--;&nbsp; taskNumber.textContent = tasks;}addButton.addEventListener('click', addTask)searchInput.addEventListener('input', searchTask);.hidden {&nbsp; display: none;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; <title>To-do app</title></head><body>&nbsp; <form class="add" action=''>&nbsp; &nbsp; <input type="text">&nbsp; &nbsp; <button>Add</button>&nbsp; </form>&nbsp; <h1>Numbers of tasks: <span>0</span></h1>&nbsp; <ul></ul>&nbsp; <form class="search" action=''>&nbsp; &nbsp; <input type="search" placeholder="search">&nbsp; </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) => {&nbsp; e.preventDefault();&nbsp; tasks++;&nbsp; let task = addInput.value;&nbsp; if (task === '') return;&nbsp; const li = document.createElement('li');&nbsp; li.innerHTML = task + " <button id=" + tasks + "> X </button>"&nbsp; li.id = tasks;&nbsp; &nbsp;&nbsp;&nbsp; ul.appendChild(li);&nbsp; // console.log(task);&nbsp; addInput.value = '';&nbsp; taskNumber.textContent = tasks;&nbsp; li.querySelector('button').addEventListener('click', (e) => deleteTask(e, tasks));&nbsp; elements.push(li);}const searchTask = (e) => {&nbsp; const text = e.target.value.toLowerCase();&nbsp; let lis = [...document.querySelectorAll('li')];&nbsp; &nbsp;lis = elements.filter(li => li.textContent.toLowerCase().includes(text));&nbsp; &nbsp;ul.textContent = '';&nbsp; &nbsp;lis.forEach(li => ul.appendChild(li));}const deleteTask = (e, id) => {&nbsp; e.target.parentNode.remove();&nbsp; elements = elements.filter(el => {&nbsp; &nbsp; return +el.id !== id;&nbsp; })&nbsp; tasks--;&nbsp; taskNumber.textContent = tasks;}addButton.addEventListener('click', addTask)searchInput.addEventListener('input', searchTask);.hidden {&nbsp; display: none;}<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; <meta http-equiv="X-UA-Compatible" content="ie=edge">&nbsp; <title>To-do app</title></head><body>&nbsp; <form class="add" action=''>&nbsp; &nbsp; <input type="text">&nbsp; &nbsp; <button>Add</button>&nbsp; </form>&nbsp; <h1>Numbers of tasks: <span>0</span></h1>&nbsp; <ul></ul>&nbsp; <form class="search" action=''>&nbsp; &nbsp; <input type="search" placeholder="search">&nbsp; </form></body>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答