Question

我有一个待办事项列表，我要显示所有待办事项，待办事项标记为虚假（点击）和待办事项标记为真（点击）。每个项目（现在这里）只有一个标题和一个按钮，当（点击时）标记该项目（true）。我无法在网上找到任何帮助我的东西。任何帮助非常感谢！我已经创建了一个codepen，因此您可以（希望）更容易地看到问题。

https://codepen.io/helloocoding/pen/XEXJJN?editors=1010

如何执行以下操作：

1：对于所有标记的项目：当我点击“showFlagged”按钮时，我会看到标记的项目，这就是我想要的。但是，它也应该显示新添加的项目（没有页面刷新）。我在这里做的是，在我将flag设置为true的函数内调用showNotFlagged函数。但是，像这样，当您单击标志按钮（添加项目旁边）时，将显示整个showNotFlagged项目列表。如果showFlagged函数已经'打开'，我怎么能调用showFlagged函数，所以将它添加到dom但不显示它？

2：对于未标记的项目：当我添加新项目时，其标记自动为false。如何在不添加到dom的情况下添加新添加的项目“show Not Flagged list”？我无法调用我追加所有未标记项目的函数，因为我只想添加新项目，但尚未添加到DOM。

HTML：

  <div>
    <input id="title" />
    <button type="submit" id="add">Add me</button>
  </div>
  <ul id="todoList"></ul>
  <button type="submit" id="showFlagged">Show Flagged</button>
  <button type="submit" id="showNotFlagged">Show not Flagged</button>

  <ul id="flaggedTodos"></ul>

JS：

function Todo(title) {
  this.title = title;
  this.flag = false;
}

window.onload = init;

function init() {
  //showAll();
  var addButton = document.querySelector("#add");
  addButton.onclick = addItem;
  var flagedButton = document.querySelector("#showFlagged");
  flagedButton.onclick = showFlaggedTodos;
  var notFlagedButton = document.querySelector("#showNotFlagged");
  notFlagedButton.onclick = showNotFlaggedTodos;
}

function showAll() {
  var ul = document.getElementById("todoList");
  var listFragment = document.createDocumentFragment();
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.map(function(item) {
    var li = create(item);
    listFragment.appendChild(li);
  })
  ul.appendChild(listFragment);
}

function addItem() {
  var title = document.querySelector("#title").value;
  var todoItem = new Todo(title);
  var ul = document.getElementById("todoList");
  var li = create(todoItem);
  ul.appendChild(li);
  saveItem(todoItem)
}

function create(todoItem) {
  var li = document.createElement("li");

  var titleElem = document.createElement("li");
  var title = document.createTextNode(todoItem.title);
  titleElem.appendChild(title);

  var button = document.createElement("button");
  var buttonFlag = document.createTextNode("flag me");
  button.appendChild(buttonFlag);
  button.addEventListener("click", function(ev) {
    isFlagged(todoItem, ev);
  })
  li.appendChild(titleElem);
  li.appendChild(button);
  return li;
}

function saveItem(todoItem) {
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.push(todoItem);
  localStorage.setItem("todos", JSON.stringify(todos));
}

function updateItem(todoItem) {
  console.log("3", todoItem)
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  var updatedItem = todoItem;
  todos.map(function(item, i) {
    if (todoItem.title == item.title) {
      todos.splice(i, 1);
      todos.push(updatedItem);
    }
  })
  localStorage.setItem("todos", JSON.stringify(todos));
}

function isFlagged(todoItem, ev) {
  todoItem.flag = !todoItem.flag;
  updateItem(todoItem);
  showFlaggedTodos();
}

function showFlaggedTodos() {
  console.log("called")
  var ul = document.getElementById("flaggedTodos");
  var listFragment = document.createDocumentFragment();
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.map(function(item) {
    if (todos.length > 0) {
      if (item.flag) {
        var li = create(item);
        listFragment.appendChild(li);
      } else {
        console.log("no flagged items")
      }
    } else {
      console.log("no items")
    }
  })
  ul.appendChild(listFragment);
  var flagedButton = document.querySelector("#showFlagged");
  flagedButton.onclick = "";
}

function showNotFlaggedTodos() {
  var ul = document.getElementById("flaggedTodos");
  var listFragment = document.createDocumentFragment();
  var todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.map(function(item) {
    if (todos.length > 0) {
      if (!item.flag) {
        var li = create(item);
        listFragment.appendChild(li);
      } else {
        console.log("no not flagged items")
      }
    } else {
      console.log("no items")
    }
  })
  ul.appendChild(listFragment);
  var notFlagedButton = document.querySelector("#showNotFlagged");
  notFlagedButton.onclick = "";
}

JS - 如何在没有页面刷新的情况下动态添加数据并将其附加到DOM？

0 个答案: