如何使用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