如何使用vanilla javascript一次只检查一个项目？

Question

我正在构建一个简单的待办事项列表，但是我在尝试解决循环中遇到的这个问题时遇到了大约 2 周的麻烦。 有人可以解释一下我做错了什么吗？ 我想一次检查每个项目，我目前正在使用 for 循环来遍历每个项目。 我一直面临的问题是循环导致同时检查所有项目。 我尝试过简单的 if else 语句、开关、while 循环、嵌套 for 循环。 任何建议将不胜感激。 代码如下。

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

    <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>

Answer 1

您正在对 for 循环的每次迭代评估 event.target。

您应该根据迭代的当前元素来执行此操作，以便每个元素都根据其自己的属性进行更新。

Answer 2

似乎您已经在这里回答了您自己的问题，因为您使用的是 for 循环，所以所有项目都被选中。 在定义要在单击事件后调用的函数后尝试使用 e.target。 这样，您将只更改您单击的单个项目：

    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);
    });

如何使用vanilla javascript一次只检查一个项目？

问题描述

2 个解决方案

解决方案1
0 2020-10-04 23:14:27

解决方案2
0 已采纳 2020-10-04 23:21:40

如何使用vanilla javascript一次只检查一个项目？

问题描述

2 个解决方案

解决方案1 0 2020-10-04 23:14:27

解决方案2 0 已采纳 2020-10-04 23:21:40

解决方案1
0 2020-10-04 23:14:27

解决方案2
0 已采纳 2020-10-04 23:21:40