当调用另一个功能

Question

我制作了一个待办事项应用程序，并制作了三个单选按钮，为用户提供了查看所有任务，已完成任务和未完成任务的选项。当我在它们之间切换时，它们按计划工作。我创建了一个函数，并使用display: none和display: ""隐藏和显示元素。

问题是，当我将任务更改为已完成时，所有隐藏的元素又会重新出现。

示例：在第一张照片中，我处于完整视图中，然后单击“ 2”将其标记为未完成。在第二张图片中，其他隐藏的元素再次出现。

为什么它们又出现了？我尝试在completeList()函数内部再次调用该函数，但没有任何反应。

演示：https://jsfiddle.net/jho25m4p/（功能位于66和103行）。

这是两个功能：

function radioButtons(e){
  const taskLi = document.querySelectorAll('li');
  const el = e.target;
    if(el.checked && el.value == "value1"){
      taskLi.forEach(li => {
        if(li.classList.contains('done') || !li.classList.contains('done')) {
        li.style.display = "";
        }
      })

    }
    else if(el.checked && el.value == "value2") {
      taskLi.forEach(li => {
       if(li.classList.contains('done')){
         li.style.display = "";
       }
       else if (!li.classList.contains('done')){
         li.style.display = "none";
       }

    })
    }
    else if(el.checked && el.value == "value3") {
      taskLi.forEach(li => {
       if(li.classList.contains('done')){
          li.style.display = "none";
       }
       else if(!li.classList.contains('done')){
        li.style.display = "";
       }
     })

    }
}


// mark as complete
function completeList(e) {

  const targetLi = e.target.tagName === 'LI' ? e.target : e.target.parentElement;
  const lisArr = Array.from(list.children);
  const index = lisArr.indexOf(targetLi);
  const taskLi = document.querySelectorAll('li');

  taskLi.forEach(li => {

    if(li.contains(e.target)){
      li.classList.toggle('done');
      items[index].done = !items[index].done;
      populateList(items, list);
      localStorage.setItem('items', JSON.stringify(items));
    }

  });

};```

Answer 1

completeTask()调用populateList()，它重写了任务列表的HTML，因此所有任务都可见。

这不是必需的，摆脱它。