Javascript 执行列表数组排序的步骤

我总是拿着我列的一张待办事项清单乱来

所以我的问题是排序。当有人添加一个todo时，我将一个对象推送到数组中

问题是，当你勾选“完成”时，它会转到“已完成”部分，但是如果你决定再次使它未完成，它会回到列表的顶部，我认为这是最好的方法，而不是转到列表的底部。如果你不这么认为，请告诉我

所以它返回到列表的顶部，但是它的数组位置从未改变，所以在刷新时它只是返回到它的正常数组位置。我真的不想在刷新时重新调整列表

我问了一个类似的问题，得到的回答是使用“sort”方法，所以我在对象上添加了一个“iscomplete”属性，所以当您完成后，它会将这些排序到顶部

但是，如果你有多个项目完成，然后不完成，你只会得到相同的问题

不知道如何解决这个问题

HTML

JS

---

您发布了很多代码，包括许多与问题不相关的函数，因此很难给出建议

---

也许当用户取消选中某个项目时，您可以从阵列中删除该任务并将其重新添加到阵列的前端？您可以使用该方法在数组前面预先添加某些内容

这有很多代码需要排序

简而言之，您需要的是在移动项目时，在底层数组中移动它，而不仅仅是在呈现的HTML中

它之所以会出现这种情况，是因为您只将它放在HTML元素的顶部，而没有重新排列底层数据

当您要完成/取消完成一个项目时，除了在DOM中呈现它之外，还应该在存储的项目中移动该项目

类似这样的操作会将项目从其当前位置移动到列表的顶部：

const storedItems = []; // get from somewhere
let indexOfItem = 5; // the item you're going to move

storedItems.shift(storedItems.splice(indexOfItem, 1)[0]);

这样做的目的是通过拼接将项目从其当前位置移除，然后将其移到阵列的前面

这将使您能够使数组与DOM保持一致。当您要完成它时，您可以做类似的事情，只需将索引更改为与DOM相同的位置

更好的解决方案可能是使用一个函数根据存储的数据重新呈现整个DOM，然后所有函数只需更改它们的数组并告诉它重新绘制即可。这是像React和AngularJS这样的框架所做的，尽管它们确实有一些奇特的优化

// To do list

var storeToDos = [];

// Cache DOM
var addToDo = document.getElementById('add-to-do');
var taskHolder = document.getElementById('task-holder');
var uncompleteTasks = document.getElementById('uncompleted-tasks');
var completedTasks = document.getElementById('completed-tasks');

// Bind events
var bindEvents = function(listItem, checkboxEventHandler) {
  // Delete
  var deleteToDo = listItem.querySelector('.delete-to-do');
  deleteToDo.addEventListener('click', deleteTask);
  // Edit
  listItem.querySelector('.edit-to-do').addEventListener('click', editTask);
  listItem.querySelector('.edit-holder').addEventListener('keyup', editTaskEnter);
  // Checkbox
  var checkbox = listItem.querySelector('input.edit-to-do');
  checkbox.onchange = checkboxEventHandler;
}

// Create list item
var createListItem = function() {
  var listItem = document.createElement('li');
  var deleteToDo = document.createElement('div');
  deleteToDo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7.1 7.1l9.8 9.8M7.1 16.9l9.8-9.8"/></svg>';
  deleteToDo.classList.add('delete-to-do');
  var editToDo = document.createElement('div');
  editToDo.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M16 3l5 5L8 21H3v-5z"/></svg>';
  editToDo.classList.add('edit-to-do');
  var toDoStatus = document.createElement('input');
  toDoStatus.type = 'checkbox';
  toDoStatus.classList.add('edit-to-do');
  var editHolder = document.createElement('input');
  editHolder.type = 'text';
  editHolder.classList.add('edit-holder');

  listItem.appendChild(deleteToDo);
  listItem.appendChild(editToDo);
  listItem.appendChild(toDoStatus);
  listItem.appendChild(editHolder);

  return listItem;
}

// Add task
var addTask = function(e) {
  var listItem = createListItem();
  var taskHolderValue = taskHolder.value;
  if(taskHolderValue) {
    document.querySelector('body').classList.add('to-do-activated');
    var taskHolderElement = document.createElement('label');
    taskHolderElement.classList.add('to-do-item');
    listItem.insertBefore(taskHolderElement, listItem.childNodes[0]);
    var storeToDosObj = {
      value: '',
      id: null,
      completed: false,
      didComplete: false
    }
    storeToDosObj.value = taskHolderValue;
    var listId = storeToDosObj.id = Date.now();
    listItem.id = listId;
    uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
    var storedToDos = localStorage.getItem('todos');
    if(storedToDos) {
      var storedToDosArr = JSON.parse(localStorage.todos);
      storedToDosArr.push(storeToDosObj);
      localStorage.setItem('todos', JSON.stringify(storedToDosArr));
    } else {
      console.log(storeToDos);
      storeToDos.push(storeToDosObj);
      localStorage.setItem('todos', JSON.stringify(storeToDos));
    }
    taskHolderElement.innerHTML = taskHolderValue;
    bindEvents(listItem, taskCompleted);
    taskHolder.value = '';
  } else {
    alert("You didn't add a to a to do!");
  }
}

var addTaskEnter = function(e) {
  var key = 'which' in e ? e.which : e.keyCode;
  if(key === 13) {
    addTask();
  }
}

// Delete task
var deleteTask = function() {
  var listItem = this.parentNode;
  var parentItem = listItem.parentNode;
  var getToDos = JSON.parse(localStorage.getItem('todos'));
  for(var b=0; b<getToDos.length; b++) {
    if(getToDos[b].id == listItem.id) {
      getToDos.splice(b, 1);
      localStorage.setItem('todos', JSON.stringify(getToDos));
    }
  }
  parentItem.removeChild(listItem);
}

// Edit task
var editTask = function() {
  var defaultValue = this.parentNode.querySelector('label').innerHTML;
  var listItem = this.parentNode;
  var listParent = this.parentNode;
  var editedValue = listParent.querySelector('input.edit-holder').value;
  if(listItem.classList.contains('editing') && editedValue) {
    listParent.querySelector('label').innerHTML = editedValue;
    var storedLocalStorage = JSON.parse(localStorage.todos);
    for(var d=0; d<storedLocalStorage.length; d++) {
      if(storedLocalStorage[d].id == listItem.id) {
        storedLocalStorage[d].value = editedValue;
        storedLocalStorage[d].completed = false;
        localStorage.setItem('todos', JSON.stringify(storedLocalStorage));
      }
    }
  }
  listItem.classList.toggle('editing');
  listParent.querySelector('input.edit-holder').value = '';
}

// Edit task enter
var editTaskEnter = function(e) {
  var key = 'which' in e ? e.which : e.keyCode;
  if(key === 13) {
    editTask.call(this);
  }
}

// Task completed
var taskCompleted = function() {
  var listItem = this.parentNode;

  var storedCompletion = JSON.parse(localStorage.getItem('todos'));
  if(storedCompletion) {
    if(listItem.classList.contains('editing')) {

    }
    for(var e=0; e<storedCompletion.length; e++) {
      if(storedCompletion[e].id == listItem.id) {
        if(storedCompletion[e].completed === true) {
          this.parentNode.classList.add('completed');
          uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
          this.parentNode.classList.remove('completed');
          bindEvents(listItem, taskCompleted);
          storedCompletion[e].completed = false;
          storedCompletion[e].didComplete = false;
        } else {
          completedTasks.insertBefore(listItem, completedTasks.childNodes[0]);
          this.parentNode.classList.add('completed');
          bindEvents(listItem, taskUncompleted);
          storedCompletion[e].completed = true;
          storedCompletion[e].didComplete = true;
        }
        localStorage.setItem('todos', JSON.stringify(storedCompletion));
      }
    }
  }
}

// Task uncompleted
var taskUncompleted = function() {
  var listItem = this.parentNode;
  uncompleteTasks.insertBefore(listItem, uncompleteTasks.childNodes[0]);
  this.parentNode.classList.remove('completed');
  bindEvents(listItem, taskCompleted);

  if(localStorage) {
    var storedCompletion = JSON.parse(localStorage.getItem('todos'));
  }

  for(var f=0; f<storedCompletion.length; f++) {
    if(storedCompletion[f].id == listItem.id) {
      storedCompletion[f].completed = false;
      localStorage.setItem('todos', JSON.stringify(storedCompletion));
    }
  }
}

// Add task
addToDo.addEventListener("click", addTask);
taskHolder.addEventListener("keyup", addTaskEnter);

// Loop over complete tasks
for(i=0; i<completedTasks.length; i++) {
  var listItem = completedTasks[i];
  uncompleteTasks.appendChild(listItem);
  bindEvents(listItem, completedTasks);
}

// Render local storage
var getToDos = JSON.parse(localStorage.getItem('todos'));
getToDos.reverse();
getToDos.sort(function(a, b){
  return b.didComplete > a.didComplete;
});
if(getToDos) {
  for(i=0; i<getToDos.length; i++) {
    var listItem = createListItem();
    listItem.id = getToDos[i].id;
    var storedListItem = document.createElement('label');
    storedListItem.innerHTML = getToDos[i].value;
    listItem.insertBefore(storedListItem, listItem.childNodes[0]);
    if(getToDos[i].completed === true) {
      listItem.querySelector('input').checked = true;
      completedTasks.appendChild(listItem);
      listItem.classList.add('completed');
    } else {
      uncompleteTasks.appendChild(listItem);
    }
    bindEvents(listItem, taskCompleted)
  }
}

if(JSON.parse(localStorage.getItem('todos')).length > 0) {
  document.querySelector('body').classList.add('to-do-activated');
}

const storedItems = []; // get from somewhere
let indexOfItem = 5; // the item you're going to move

storedItems.shift(storedItems.splice(indexOfItem, 1)[0]);