如何使用vanilla javascript一次只检查一个项目？
[英]How to make a loop check off only one item at a time using vanilla javascript?
问题描述
I am building a simple todo list, but I am having a bit of trouble for about 2 weeks now trying to solve this problem I have with the loops.
我正在构建一个简单的待办事项列表，但是我在尝试解决循环中遇到的这个问题时遇到了大约 2 周的麻烦。 Can someone explain what I am doing wrong please?有人可以解释一下我做错了什么吗？ I want to check each item off one at a time, I'm currently using for loops to iterate thru each item.我想一次检查每个项目，我目前正在使用 for 循环来遍历每个项目。 The problem I have been facing is that the loops cause all items to be checked off at the same time.我一直面临的问题是循环导致同时检查所有项目。 I have tried simple if else statements, switches, while loops, nested for loops.我尝试过简单的 if else 语句、开关、while 循环、嵌套 for 循环。 Any advice would be greatly appreciated.任何建议将不胜感激。 Code below.代码如下。
Javascript Javascript
const check = document.querySelectorAll('.check');
const uncheck = document.querySelectorAll('.uncheck');
const li = document.querySelectorAll('li');
function checkItem(event) {
for(let i = 0; i < li.length && i < check.length && i < uncheck.length; i++) {
switch(event.target.classList.contains('far')) {
case true:
li[i].style.textDecoration = 'line-through'
check[i].style.display = 'block';
uncheck[i].classList.toggle('check');
break;
default:
li[i].style.textDecoration = 'none';
check[i].style.display = 'none';
uncheck[i].classList.toggle('uncheck');
}
}
}
EJS EJS
<body onclick="checkItem(event)">
<div id="wrapper">
<div id="interface">
<header>
<i class="fas fa-sync-alt" id="delAllBtn"></i>
<div id="datebox">
<p id="time">4:20pm</p>
<br>
<p id="date">September 24, 2020</p>
</div>
</header>
<div id="userInput">
<form action="/list" method="POST">
<input type="text" placeholder="Enter item.." name="item" autofocus required>
<button type="submit" id="addBtn"><i class="fas fa-plus-circle"></i></button>
</form>
</div>
<main>
<ul id="list">
<% for(let i = 0; i < list.length; i++) {%>
<li class="list-item">
<div class="checkbox">
<i class="far fa-circle uncheck"></i>
<i class="fas fa-check-circle check"></i>
</div>
<span><%= list[i].item %></span>
<div id="buttons">
<button type="submit" data-update="<%= list[i]._id %>" class="saveBtn"><i class="fas fa-edit"></i></button>
<button type="button" data-update="<%= list[i]._id %>" class="editBtn"><i class="fas fa-edit"></i></button>
<button type="button" data-delete="<%= list[i]._id %>" class="delItemBtn"><i class="fas fa-trash-alt"></i></button>
</div>
</li>
<% } %>
</ul>
</main>
<footer>
<p>Footer</p>
</footer>
</div>
</div>
<script src="javascripts/main.js"></script>
</body>
2 个解决方案
解决方案1
0 2020-10-04 23:14:27
You are evaluating event.target on every iteration of the for loop.您正在对 for 循环的每次迭代评估 event.target。
You should do it based on the current element of the iteration so that each element gets updated based on its own properties.您应该根据迭代的当前元素来执行此操作，以便每个元素都根据其自己的属性进行更新。
解决方案2
0 已采纳 2020-10-04 23:21:40
It seems like you have answered your own question here, all items are being checked off because you are using a for loop.似乎您已经在这里回答了您自己的问题，因为您使用的是 for 循环，所以所有项目都被选中。 Try using e.target after defining a function that you want to call after a click event.在定义要在单击事件后调用的函数后尝试使用 e.target。 This way you will only change the individual item that you click on:这样，您将只更改您单击的单个项目：
function checkItem(el) {
if (el.classList.contains('uncheck')) {
el.classList.add("check");
el.classList.remove("uncheck");
}
}
document.querySelector('#list').addEventListener('click', (e) => {
checkItem(e.target);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.