javascript - JavaScript 中使用输入的类别

Question

如何将输入中的“任务”划分为类别？过滤后的画廊很好，我在 W3school 上找到了很多教程，但我没有找到如何从直接输入中添加它们的任何地方，可能使用 option-id。

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function addClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function removeClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

<form id="FORM">
  <label for="jmeno">Assigned task</label>
  <input type="text" id="homework" required />

  <label for="category">Category</label>

  <select name="selectCategory" id="category">
    <option value="">---</option>
    <option value="School" id="school">School</option>
    <option value="Work" id="work">Work</option>
  </select>

  <input type="submit" value="Add" />
</form>

<h2>TASK TO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> All</button>
  <button class="btn" onclick="filterSelection('school')"> To school</button>
  <button class="btn" onclick="filterSelection('work')"> To work</button>
</div>

标签： javascripthtml

Answer 1

像这样的东西应该工作。

let taskForm = document.tasks;
taskForm.onsubmit = e => {
  e.preventDefault();
  let taskData = new FormData(taskForm);
  let category = taskData.get("category");
  
  let result = document.querySelector(".tasks");
  let task = document.createElement('div');
  let filterTask = document.querySelector('input[name="filter"]:checked');
  task.appendChild(document.createTextNode(taskData.get("task")));
  task.dataset.group = category;
  task.classList.add("task");
  task.style.display = ["all", category].includes(filterTask.value) ? "block" : "none"; 
  result.appendChild(task);
}

let showTasks = document.getElementsByName("filter");
showTasks.forEach(el => {
  el.addEventListener("click", e => {
    tasks = document.querySelectorAll(".task");
    tasks.forEach(task => {
      task.style.display = ["all", task.dataset.group].includes(e.target.value) ? "block" : "none";
    });
  });
});

input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

input[type="radio"] ~ label {
  display: inline-block;
  background-color: #ddd;
  padding: 5px 20px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 2px solid #444;
  border-radius: 4px;
}

input[type="radio"] ~ label:hover {
  background-color: #dfd;
}

input[type="radio"]:checked + label {
  background-color: #bfb;
  border-color: #4c4;
}

<div>
  <form name="tasks">
    <label for="name">Assigned Task</label>
    <input name="task" type="text" required />

    <label for="category">Category</label>
    <select name="category">
      <option value="school" selected>School</option>
      <option value="work">Work</option>
    </select>

    <input type="submit" value="Add" />
  </form>

  <h3>Task To</h3>

  <input name="filter" id="all" type="radio" value="all" checked />
  <label for="all">All</label>

  <input name="filter" id="school" type="radio" value="school" />
  <label for="school">School</label>

  <input name="filter" id="work" type="radio" value="work" />
  <label for="work">Work</label>

  <h2>Tasks</h2>
  <div class="tasks"></div>
</div>

您可以使用 CSS 中的选择器为添加的任务设置.task样式。

请注意，如果您想在显示和隐藏任务时制作动画，请考虑使用opacity和属性，而不是更改显示visibility属性。