Javascript 调用另一个函数时，隐藏元素会重新出现

我制作了一个待办应用程序，我制作了三个单选按钮，让用户可以查看所有任务、已完成任务和未完成任务。当我在它们之间切换时，它们按计划工作。我创建了一个函数，并使用

display:none

和

display:“

隐藏和显示元素

问题是，当我将任务更改为“已完成”或“从已完成”时，所有隐藏的元素都会再次出现

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

为什么它们会再次出现？我尝试在

completeList（）

函数中再次调用该函数，但什么也没发生

演示：（功能在第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));
    }

  });

};```

completeTask（）

调用

populateList（）

，它重写任务列表的HTML，使所有任务都可见

这是不必要的，摆脱它。

completeTask（）

调用

populateList（）

，它重写任务列表的HTML，因此所有任务都可见

---

这不是必需的，请将其删除。

const taskLi=document.querySelectorAll（'li'）这是文档中的所有LI，而不仅仅是当前任务。

如果（LI.classList.contains（'done'）| |！LI.classList.contains（'done'））

那么，基本上总是运行代码：）@我知道。除了我想要的以外，我没有“Li”，所以我只是用了它。它与我的问题或其他问题有关吗？请注意：辅助功能方面-不要将

用作按钮。使用。。。猜猜看

在

completeTask（）

中调用

populateList（）

。这将重写任务列表的所有HTML，并且不会在单选按钮中隐藏与当前条件不匹配的任务。

const taskLi=document.queryselectoral（'li'）

这是文档中的所有LI，而不仅仅是当前任务。

如果（LI.classList.contains（'done'）| |！LI.classList.contains（'done'））

那么，基本上总是运行代码：）@我知道。除了我想要的以外，我没有“Li”，所以我只是用了它。它与我的问题或其他问题有关吗？请注意：辅助功能方面-不要将

用作按钮。使用。。。猜猜看

在

completeTask（）

中调用

populateList（）

。这将重写任务列表的所有HTML，并且不会在单选按钮中隐藏与当前条件不匹配的任务。