Question

我正在尝试制作一个待办事项列表程序，当用户完成一项任务时，它将添加一个名为（完成）的类以在任务中划出一条线..所以我正在尝试制作一个按钮所有的任务都完成了，但问题是我不能把类（完成）放到刚刚添加到一个任务类中的所有任务类

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>

...这是代码

Answer 1

试试这个。

finishAll.onclick = function () {



    document.querySelectorAll('.tasks-box').forEach(e => {
        e.classList.add('finished');

    })
    
}

您使用了 querySelector，它只占用类中的第一个。如果您使用 querySelectorAll，您将使用与您拥有的选择器相匹配的 dom 节点列表。

Answer 2

使用它来改变每个元素的类：

document.querySelectorAll('.tasks-box').forEach( (node) => node.classList.add('finished') )

完成待办事项列表中的所有任务

2 个答案: