我正在开发我的简单待办事项应用程序（可以将任务添加到列表中，删除它并搜索和过滤它）。我有一个问题，因为当我在搜索输入中写一些东西时，一切都很好（过滤效果很好）。但是当我删除字母（退格）或删除所有文本时，我有没有任务的空列表。你能改进我的代码吗？这是我的代码：我最近遇到了一个高尔夫卡塔，要求检查一个字母是否大写，不超过 9 个字符。用户的回答有点吓人（这些例子也适用>于相反的顺序）：f=s=>s<{}f=c=>c<{}f=_=>_<ff=Z=>Z<f某些变量名称不适用于f：f=a=>a<ff=z=>z<f将函数与基本字符串进行比较时，<and>运算符为何以及如何工作？也许指针比较？自己试试：// workingf1=s=>s<{}f2=c=>c<{}f3=_=>_<f3f4=Z=>Z<f4// not workingf5=s=>s<f5console.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'))
1 回答
哔哔one
TA贡献1854条经验 获得超8个赞
问题是你覆盖了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>
添加回答
举报
0/150
提交
取消