javascript - 完成待办事项列表中的所有任务
问题描述
我正在尝试制作一个待办事项列表程序,当用户完成一项任务时,它将添加一个名为(finished) 的类以在任务中划出一条线。所以我试图在所有任务完成时制作一个按钮已完成,但问题是我不能将类(已完成)放入所有任务类,它只是添加到一个任务类
let input = document.getElementById('input');
let addButtob = document.querySelector('.plus');
let noTasksMsg = document.querySelector('.no-tasks-mess');
let tasksContainer = document.querySelector('.tasks-content');
let count = document.querySelector('.count span');
let completed = document.querySelector('.tasks-completed span');
let empty = document.querySelector('.empty');
let deleteAll = document.querySelector('.delete-all');
let finishAll = document.querySelector('.finish-all');
window.input.focus();
addButtob.onclick = function () {
if (input.value != '') {
noTasksMsg.remove();
let mainSpan = document.createElement('span');
deleteSpan = document.createElement('span');
let text = document.createTextNode(input.value);
let deleteText = document.createTextNode('Delete');
mainSpan.appendChild(text);
mainSpan.className = 'tasks-box';
deleteSpan.appendChild(deleteText);
deleteSpan.className = 'delete';
mainSpan.appendChild(deleteSpan);
tasksContainer.appendChild(mainSpan);
input.value = '';
input.focus();
count.textContent++;
}
else {
empty.style.visibility = 'visible';
input.focus();
}
}
input.oninput = function () {
empty.style.visibility = 'hidden';
}
document.addEventListener('click', function (e) {
if (e.target.className == 'delete') {
e.target.parentNode.remove();
count.textContent--;
}
if (e.target.classList.contains('tasks-box')) {
e.target.classList.toggle('finished');
completed.textContent = document.querySelectorAll('.tasks-content .finished').length;
}
if (tasksContainer.children.length === 0) {
tasksContainer.appendChild(noTasksMsg);
}
});
deleteAll.onclick = function () {
console.log(tasksContainer.innerHTML);
tasksContainer.innerHTML = '';
count.textContent = 0;
}
finishAll.onclick = function () {
document.querySelector('.tasks-box').classList.add('finished');
}
*{
box-sizing:border-box;
}
.todo-container {
width:600px;
margin: 30px auto 0;
background: #8C4D70;
}
.todo-container .add-task {
background: #BF5E81;
padding:15px;
position:relative;
}
.todo-container .add-task input {
width: calc(100% - 15px);
padding: 9px 15px;
display: inline-block;
border: none;
color: #fff;
background: #F2C2CB;
font-size:20px;
}
.todo-container .add-task input:focus {
outline:none;
}
.todo-container .add-task .plus {
position: absolute;
width: 43px;
height: 43px;
background: #ffffff;
color: #BF5E81;
border-radius: 50%;
text-align: center;
line-height: 43px;
font-size: 40px;
font-weight:bold;
right: 12px;
cursor: pointer;
transition: transform .2s;
}
.todo-container .add-task .plus:hover {
transform:rotate(90deg);
}
.tasks-content {
padding:5px;
}
.no-tasks-mess {
color: #F2C2CB;
}
.tasks-content > span {
display: block;
padding: 10px;
background: #fff;
margin: 10px;
}
.delete {
float: right;
background: #73435D;
padding:3px 10px;
border-radius: 4px;
cursor:pointer;
color:#fff;
font-size:12px;
font-weight:bold;
}
.tasks-status {
width: 600px;
padding: 8px 10px;
margin-left: 30%;
font-size: 12px;
}
.tasks-status .count {
float:left;
}
.tasks-status .tasks-completed {
float:right;
}
.tasks-status .count span {
background-color:#BF5E81;
padding:1px 4px;
border-radius:5px;
}
.tasks-status .tasks-completed span {
background-color: #0460D9;
padding: 1px 4px;
border-radius: 5px;
}
.finished {
text-decoration:line-through;
}
.empty {
position: absolute;
color: red;
text-decoration: overline;
top:55px;
font-size:15px;
visibility:hidden;
}
button {
background: #73435D;
color: #fff;
font-weight: bold;
border: none;
padding: 8px 10px;
outline: none;
font-size:12px;
border-radius:5px;
cursor:pointer;
}
.finish-all {
float:right;
margin-top:30px;
margin-right:-85px;
}
.delete-all {
float: left;
margin-top: 30px;
margin-left: -50px;
}
<body>
<div class="todo-container">
<div class="add-task">
<div class="empty">The Field is Empty!</div>
<input id="input" type="text" />
<span class="plus">+</span>
</div>
<div class="tasks-content">
<span class="no-tasks-mess">NO TASKS TO SHOW</span>
</div>
</div>
<div class="tasks-status">
<div class="count">
Tasks
<span>0</span>
</div>
<div class="tasks-completed">
Complated
<span>0</span>
</div>
<button class="delete-all">Delete All</button>
<button class="finish-all">Finished All</button>
</div>
<script src="todo.js">
</script>
</body>
...这是代码
解决方案
试试这个。
finishAll.onclick = function () {
document.querySelectorAll('.tasks-box').forEach(e => {
e.classList.add('finished');
})
}
您使用了 querySelector ,它只占用类中的第一个。如果您使用 querySelectorAll,您将使用与您拥有的选择器匹配的 doms 节点列表。
推荐阅读
- python - 命令提示符无法找到 python
- c# - 在没有“检测到无法访问的代码”的情况下引发临时异常
- android - 蓝牙RSSI值波动
- flutter - 在部分图像上叠加渐变着色器遮罩
- sql - 如何删除 SQL Server 中完全相同的重复行
- asp.net-core - Blazor WebAssembly - 如何安全地使用私有/受限 API?
- cmake - CMake 测试未显示在 gcc 构建的测试资源管理器中
- reactjs - 如何将状态传递给路由器渲染的组件
- angular - FormControl:异步验证器未触发以验证无效输入
- linux - 在使用 perl 的 expect 发送命令之前,如何正确等待终端中的提示?