javascript - 如何在纯 JavaScript 中改进这个简单的待办事项应用程序中的过滤
问题描述
我正在开发我的简单待办事项应用程序(可以将任务添加到列表中,删除它并搜索和过滤它)。我有一个问题,因为当我在搜索输入中写一些东西时,一切都很好(过滤效果很好)。但是当我删除字母(退格)或删除所有文本时,我有没有任务的空列表。你能改进我的代码吗?这是我的代码:
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 => ul.appendChild(li));
}
const deleteTask = (e) => {
e.target.parentNode.remove();
tasks--;
taskNumber.textContent = tasks;
}
addButton.addEventListener('click', addTask)
searchInput.addEventListener('input', searchTask);
<!DOCTYPE html>
<html lang="en">
<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>
解决方案
问题是您正在覆盖ul
with的内容ul.textContent = '';
一个快速的方法是.hidden
在你的 s 中有一个类,如果它们与搜索输入不匹配css
,则将其添加到s 以隐藏不匹配的结果:li
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 lang="en">
<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
,在删除时将其从该数组中删除,并使用它来过滤 search 的结果:
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 lang="en">
<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>
推荐阅读
- excel - 如何解决 vlookup 功能的错误 2042
- c# - 添加异步并发以替换 foreach 循环 C#
- javascript - 是否有任何功能可以保持每次选择的数据变化
- python - jupyter notebook security - 限制输入令牌的最大数量(密码)
- linux - Linux和Windows之间的Matlab脚本问题
- python - Flask/Heroku:Main 调用的模块的相对路径
- amazon-web-services - 使用 codebuild 将从 aws ssm 参数获取的文件内容复制到容器
- flutter - 如何更改charts_flutter中的标记点大小?
- docker - 如何在 GitHub 操作中等待容器健康?
- laravel - Laravel 中没有定义路由登录