javascript - 关于任务显示/不显示切换功能

Question

{
  document.addEventListener('DOMContentLoaded', () => {
    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
    const radioWork = document.getElementById('radio-work'); 
    const radioDone = document.getElementById('radio-done');
    let nextId = 0;
    const todos = [];

    //Taskとidを作成
    const addTask = (task, id, tableItem) => {
      const idSpanTd = document.createElement('td');
      const taskSpanTd = document.createElement('td');
      //タスク追加時にtodosにtodoを追加 
      const todo = {
        task: 'taskSpanTd',
        status: '作業中'
      };
      todos.push(todo);
      //要素内のHTML文章を変更する
      idSpanTd.innerText = id;
      taskSpanTd.innerText = task;
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(idSpanTd);
      tableItem.append(taskSpanTd);
      addTaskTarget.append(tableItem);
    };

    //Button要素を生成する
    const addButton = (tableItem, removeButton, createButton) => {
      const createButtonTd = document.createElement('td');
      const removeButtonTd = document.createElement('td');
      //要素内のHTML文章を変更する
      createButton.innerText = '作業中';
      removeButton.innerText = '削除';
      //生成したテーブル要素をブラウザに表示する
      tableItem.append(createButtonTd);
      tableItem.append(removeButtonTd);
      addTaskTarget.append(tableItem);
      //生成したbutton要素を生成する
      createButtonTd.append(createButton);
      removeButtonTd.append(removeButton);
    };

    //Perform processing to add td element when clicking the add button
    addTaskTrigger.addEventListener('click', () => {
      const task = addTaskValue.value;
      const tableItem = document.createElement('tr');
      const removeButton = document.createElement('button');
      const createButton = document.createElement('button');
      addTask(task, nextId++, tableItem);
      addButton(tableItem, removeButton, createButton);
      addTaskValue.value = '';
      // //削除ボタンを押した時にタスクを削除する
      const deleteElement = (a) => {
        const tableTag = a.target.closest('tr');
        if (tableTag) tableTag.remove();
        updateId();
      }
      removeButton.addEventListener('click', deleteElement, false);

      //When you press the button, it changes from working to completion
      createButton.addEventListener('click', (a) => {
        if (createButton.textContent === "作業中") {
          createButton.textContent = "完了";
          const doneParent = a.target.parentNode;
          doneParent.className = 'workDone';/*完了class*/
        } else {
          createButton.textContent = "作業中";
          const workParent = a.target.parentNode;
          workParent.className = 'work';/*作業中class*/
        }
      });
    })

    /*Processing when pressing the radio button in progress*/
    radioDone.addEventListener('click', function () {
      let workTasks = document.getElementsByClassName('work');
      workTasks = Array.from(workTasks);
      if (radioWork.checked === true) {
        workTasks.forEach(function (workTasks) {
          workTasks.style.display = "none";
        })
      } else {
        workTasks.forEach(function (workTasks) {
          workTasks.style.display = "none";
        })
      }
    })

    //Processing when radio button complete is pressed
    radioWork.addEventListener('click', function () {
      let doneTasks = document.getElementsByClassName('workDone');
      doneTasks = Array.from(doneTasks);
      if (radioDone.checked === true) {
        doneTasks.forEach(function (doneTasks) {
          doneTasks.style.display = "none";
        })
      } else {
        doneTasks.forEach(function (doneTasks) {
        doneTasks.style.display = "none";
        })
      }
    })

    //　Serial number reassignment
    const updateId = () => {
      const tbody = document.getElementsByTagName("tbody")[0];
      const taskList = tbody.getElementsByTagName('tr');
      nextId = 0;
      Array.from(taskList, tr => {
        tr.getElementsByTagName('td')[0].textContent = nextId;
        nextId++
      });
    }
  });
}

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Todoリスト&lt;/title>
</head>

<body>
  <h1>Todoリスト&lt;/h1>
  <p>
    <input type="radio" name="task" value="1" checked ="checked">全て
    <input type="radio" id="radio-work" name="task" value="2">作業中
    <input type="radio" id="radio-done" name="task" value="3">完了
  </p>
  <p></p>
  <table>
    <thead>
      <th>ID</th>
      <th>コメント</th>
      <th>状態</th>
      <th></th>
    </thead>
    <tbody class="addTask-target" id="tbody"></tbody>
  </table>
  <h2>新規タスクの追加</h2>
  <input class="addTask-value" type="text" />
  <button class="addTask-trigger" type="button">追加</button>
  <script src="js/main.js"></script>
</body>
</html>

我正在创建一个待办事项列表并尝试使用以下内容来实现它。

https://gyazo.com/0b47106078622a1e44e912f56b5e9603

-根据任务状态显示/隐藏 -根据选择的单选按钮切换任务显示 -如果在选择“工作”时添加新任务，将显示该任务 -如果在选择“完成”时添加新任务，任务不会显示（但在后台正确添加）

■ 当前问题

(1) 如果您按下任务完成按钮，然后将复选框投入使用，“仅完成按钮”将被隐藏。→我想隐藏每个 td

（2）即使点击进程中按钮，再点击完成复选框，也不会被隐藏

■ 试过

 if (createButton.textContent === "Working") {
          createButton.textContent = "Done";
          const doneParent = a.target.parentNode;
          doneParent.className ='workDone'; /* Done class */

这是this.parentNode; 我将其更改为

如果您有任何其他问题，请告诉我。感谢您的指导。

标签： javascript