时间戳

首页 > 解决方案 > 按下复选框时使用 CSS 显示/隐藏

javascript - 按下复选框时使用 CSS 显示/隐藏

问题描述

我正在尝试制作以下待办事项列表。

https://gyazo.com/0b47106078622a1e44e912f56b5e9603

但是，按下复选框时无法实现以下行为。

[要求]

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

[目前已知] ・从 Javascript 获取清单 id ・如果使用 if 语句，“如果您按下完成复选框，则只会显示按下完成按钮的任务（使用 CSS 隐藏工作）” ・If 语句使用，“如果您按下进行中工作的复选框，则仅显示正在按下进行中工作的任务（使用CSS隐藏完成）”

=============

我已经考虑了大约一个星期，但我一直无法解决它。我想知道未来的实现方法。

{
  document.addEventListener('DOMContentLoaded', () => {
    const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
    const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
    const addTaskValue = document.getElementsByClassName('addTask-value')[0];
    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);
    };

    //追加ボタンをクリックした際にtd要素を追加する処理を行う
    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);

      //ボタンを押したら作業中、完了中と変わる
      createButton.addEventListener('click', () => {
        if (createButton.textContent === "作業中") {
          createButton.textContent = "完了";
        } else {
          createButton.textContent = "作業中";
        }
      });
    })

    function entryChange() {
      radio = document.getElementsByName('radio1')
      //ラジオボタンの0（すべて）がチェックされたとき
      if (radio[0].checked) {
        document.getElementsByClassName('done').style.display = "";
        document.getElementsByClassName('doing').style.display = "";
        //ラジオボタンの1(完了）がチェックされたとき
      } else if (radio[1].checked) {
        //フォーム
        doing.forEach(done => {
          console.log(done);
          document.getElementsByClassName('done').style.display = "";
          document.getElementsByClassName('doing').style.display = "none";
        })
        //ラジオボタンの2(作業中）がチェックされたとき
      } else if (radio[2].checked) {
        //フォーム
        doing.forEach(work => {
          console.log(work);
          document.getElementsByClassName('done').style.display = "none";
          document.getElementsByClassName('doing').style.display = "";
        })
      }
    }
    //オンロードさせ、リロード時に選択を保持
    window.onload = entryChange;


    //　連番　再振り直し
    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="status" value="1" checked="checked">全て
    <input type="radio" name="status" value="2">作業中
    <input type="radio" name="status" 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>

标签： javascripthtmlcss

解决方案

这是切换隐藏和显示的功能

function toggleContent() {
  // Get the DOM reference
  const contentId = document.getElementById("content");
  // Toggle 
  contentId.style.display == "block" ? contentId.style.display = "none" :
    contentId.style.display = "block";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success" onclick="toggleContent()">Toggle</button>
<div class="container" id="content" style="display:block;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

推荐阅读