-1
私は、私が作ったリストを手放すことを続けています。To Doリストアレイオーダー
私の問題は並べ替えにあります。誰かがtoを追加すると、オブジェクトを配列にプッシュします。
問題は完成したセクションに行くのを完了しても、それがもう一度完了しないようにすると、リストの先頭に戻ってしまいます（私はそれが最下位に行くのではなく、リストの）。もしあなたがそうでなければ私に教えてください。
リストの先頭に戻りますが、配列位置は変更されません。リフレッシュすると、通常の配列位置に戻ります。私は本当にリフレッシュ時にリストを再ジギングしたくない。
私は同様の質問をして、「ソート」メソッドを使用すると言っているので、オブジェクトに「iscomplete」プロパティを追加しました。
しかし、複数のアイテムが完了していて、未完了の場合、同じ問題が発生します。
この問題を解決する方法が不明です。
HTML
<div class="to-do">
<div class="container">
<div class="to-do-entry">
<div class="to-do-task-holder">
<input id="task-holder" type="text" placeholder="Enter a to do!">
<svg id="add-to-do" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="5" y1="12" x2="19" y2="12"/>
</svg>
</div>
</div>
</div>
<!-- Task -->
<!-- Uncompleted -->
<div class="container">
<h3 class="to-do-title to-do-title-uncompleted">Uncompleted Tasks</h3>
</div>
<ul id="uncompleted-tasks"></ul>
<!-- Completed -->
<div class="container">
<h3 class="to-do-title to-do-title-completed">Completed Tasks</h3>
</div>
<ul id="completed-tasks"></ul>
</div>
JS
// 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');
}