Javascript 按一周中的天数对列表排序

我创建了一个项目列表，其中包含任务名（即清除垃圾）、谁必须执行任务以及任务需要在一周中的哪一天完成等信息。所有这些信息都是通过html中的文本输入收集的，然后使用JavaScript显示为列表项

我想知道是否有一种简单的方法可以按任务需要完成的一周中的哪一天对我的列表进行排序。我在想也许我应该在包含一周中的天数的字符串中添加1-7的数值。（例如，包含星期一的值为1，包含星期日的值为7）。然后我可以对这些进行数字排序

如果有人能告诉我如何使用JavaScript（而不是jQuery）或更简单的方法来实现这一点，我将不胜感激。（代码中的注释越多越好）

谢谢

//links html elements to corresponding javascript variable names

var allTasks = document.getElementById('allTasks');
var taskInput = document.getElementById('taskInput');
var personInput = document.getElementById('personInput');
var dayInput = document.getElementById('dayInput');
var addBtn = document.getElementById('addBtn');
var sortBtn = document.getElementById('sortBtn');


//Create Task List based on input put in text fields
var TaskObject = function(taskText, personText, dayText){
    var self = this;
    self.name="taskName";
    self.listItem;
    self.init = function(){

        //create html elements
        self.listItem = document.createElement("li");

        //create text box and have it display information from the previous inputed task
        var text = document.createElement("text");
        text.innerText = taskText + " ";

        //create text box and have it display information from the previous inputed person
        var text2 = document.createElement("text");
        text2.innerText = personText + " ";

        //create text box and have it display information from the previous inputed day of the week
        var text3 = document.createElement("text");
        text3.innerText = dayText + " ";

        //create delete button and functionality
        var deleteBtn = document.createElement("button");
        deleteBtn.innerHTML = "delete";
        deleteBtn.onclick = self.deleteMe;

        // combine html elements
        self.listItem.appendChild(text);
        self.listItem.appendChild(text2);
        self.listItem.appendChild(text3);
        self.listItem.appendChild(deleteBtn);
        allTasks.appendChild (self.listItem);
    }
    self.deleteMe = function(){
        var parent = self.listItem.parentNode;
        parent.removeChild(self.listItem);
    }
}

addBtn.onclick = function (){

    var newTask = new TaskObject(taskInput.value, personInput.value, dayInput.value)

    newTask.init();


}

---

有一个

内置的
javascript
函数，可以帮助获取每周的
日期

//Calling the date function
var date = new Date();
//Getting the day of the week
var day_of_week = date.getDay();

date.getDay（）
分别为
sunday
到
saturday
返回从
0到
6的值

//A function to get the day of the week
function dayOfTheWeek()
{
    var date = new Date();
    var day_of_week = date.getDay();
    switch (day_of_week)
    {
    case 0: return "sunday"
    case 1: return "monday"
    case 2: return "tuesday"
    case 3: return "wednessday"
    case 4: return "thursday"
    case 5: return "friday"
    default: return "saturday"
    }
}
//Calling the function
var day_of_week_in_string = dayOfTheWeek();

（javascript）
//将任务对象定义为数组（在TaskObject之外）
var任务=[]；
//检索数字而不是文本值
var dayInput=document.getElementById（'dayInput'）。selectedIndex
var newTask=。。。
//将此任务对象添加到任务数组
任务。推送（newTask）
//现在可以对数组进行排序：
排序（函数（a，b）{返回a.dayInput-b.dayInput}）；
（html）
星期一
星期二
星期三
星期四
这是我解决您问题的方法。创建新的
li
时，存储一个名为“数据日文本”的隐藏属性，并将其附加到
li
。排序时，从DOM中删除
ul
（为了提高性能），根据
数据日文本对
li
进行排序，然后重新附加
li
和
ul


html:



任务：

人:

日期：

添加
分类

javascript:

//links html elements to corresponding javascript variable names

var allTasksContainer = document.getElementById('allTasksContainer');
var allTasks = document.getElementById('allTasks');
var taskInput = document.getElementById('taskInput');
var personInput = document.getElementById('personInput');
var dayInput = document.getElementById('dayInput');
var addBtn = document.getElementById('addBtn');
var sortBtn = document.getElementById('sortBtn');


//Create Task List based on input put in text fields
var TaskObject = function (taskText, personText, dayText) {
    var self = this;
    self.name = "taskName";
    self.listItem;
    self.init = function () {

        //create html elements
        self.listItem = document.createElement("li");
        self.listItem.dataset.dayText = dayText;

        //create text box and have it display information from the previous inputed task
        var text = document.createElement("text");
        text.innerText = taskText + ' ' + personText + ' ' + dayText;

        //create delete button and functionality
        var deleteBtn = document.createElement("button");
        deleteBtn.innerHTML = "delete";
        deleteBtn.onclick = self.deleteMe;

        // combine html elements
        self.listItem.appendChild(text);
        self.listItem.appendChild(deleteBtn);
        allTasks.appendChild(self.listItem);
    }
    self.deleteMe = function () {
        var parent = self.listItem.parentNode;
        parent.removeChild(self.listItem);
    }
}

addBtn.onclick = function () {
    var newTask = new TaskObject(taskInput.value, personInput.value, dayInput.value)
    newTask.init();
}

sortBtn.onclick = function () {
    allTasksContainer.removeChild(allTasks);
    var nodes = [].slice.call(allTasks.getElementsByTagName('li'), 0);
    [].sort.call(nodes, function (a, b) {
        return b.dataset.dayText < a.dataset.dayText ? 1 : b.dataset.dayText > a.dataset.dayText ? -1 : 0;
    });
    while (allTasks.firstChild) {
        allTasks.removeChild(allTasks.firstChild);
    }
    nodes.forEach(function (node) {
        allTasks.appendChild(node);
    });
    allTasksContainer.appendChild(allTasks);
}

//将html元素链接到相应的javascript变量名
var allTasksContainer=document.getElementById（'allTasksContainer'）；
var allTasks=document.getElementById（'allTasks'）；
var taskInput=document.getElementById（'taskInput'）；
var personInput=document.getElementById（'personInput'）；
var dayInput=document.getElementById（'dayInput'）；
var addBtn=document.getElementById（'addBtn'）；
var sortBtn=document.getElementById（'sortBtn'）；
//基于文本字段中的输入创建任务列表
var TaskObject=函数（taskText、personText、dayText）{
var self=这个；
self.name=“taskName”；
self.listItem；
self.init=函数（）{
//创建html元素
self.listItem=document.createElement（“li”）；
self.listItem.dataset.dayText=dayText；
//创建文本框并使其显示来自上一个输入任务的信息
var text=document.createElement（“文本”）；
text.innerText=taskText+''+personText+''+dayText；
//创建删除按钮和功能
var deleteBtn=document.createElement（“按钮”）；
deleteBtn.innerHTML=“删除”；
deleteBtn.onclick=self.deleteMe；
//组合html元素
self.listItem.appendChild（文本）；
self.listItem.appendChild（deleteBtn）；
allTasks.appendChild（self.listItem）；
}
self.deleteMe=函数（）{
var parent=self.listItem.parentNode；
parent.removeChild（self.listItem）；
}
}
addBtn.onclick=函数（）{
var newTask=newtaskObject（taskInput.value、personInput.value、dayInput.value）
newTask.init（）；
}
sortBtn.onclick=函数（）{
allTasksContainer.removeChild（所有任务）；
var nodes=[].slice.call（allTasks.getElementsByTagName（'li'），0）；
[]排序调用（节点、函数（a、b）{
返回b.dataset.dayTexta.dataset.dayText？-1:0；
});
while（allTasks.firstChild）{
allTasks.removeChild（allTasks.firstChild）；
}
forEach（函数（节点）{
allTasks.appendChild（节点）；
});
allTasksContainer.appendChild（所有任务）；
}

<div id="allTasksContainer">
    <ul id="allTasks"></ul>
</div>
<p>task:
    <input type="text" id="taskInput" />
</p>
<p>person:
    <input type="text" id="personInput" />
</p>
<p>day:
    <input type="text" id="dayInput" />
</p>
<button id="addBtn">add</button>
<button id="sortBtn">sort</button>

//links html elements to corresponding javascript variable names

var allTasksContainer = document.getElementById('allTasksContainer');
var allTasks = document.getElementById('allTasks');
var taskInput = document.getElementById('taskInput');
var personInput = document.getElementById('personInput');
var dayInput = document.getElementById('dayInput');
var addBtn = document.getElementById('addBtn');
var sortBtn = document.getElementById('sortBtn');


//Create Task List based on input put in text fields
var TaskObject = function (taskText, personText, dayText) {
    var self = this;
    self.name = "taskName";
    self.listItem;
    self.init = function () {

        //create html elements
        self.listItem = document.createElement("li");
        self.listItem.dataset.dayText = dayText;

        //create text box and have it display information from the previous inputed task
        var text = document.createElement("text");
        text.innerText = taskText + ' ' + personText + ' ' + dayText;

        //create delete button and functionality
        var deleteBtn = document.createElement("button");
        deleteBtn.innerHTML = "delete";
        deleteBtn.onclick = self.deleteMe;

        // combine html elements
        self.listItem.appendChild(text);
        self.listItem.appendChild(deleteBtn);
        allTasks.appendChild(self.listItem);
    }
    self.deleteMe = function () {
        var parent = self.listItem.parentNode;
        parent.removeChild(self.listItem);
    }
}

addBtn.onclick = function () {
    var newTask = new TaskObject(taskInput.value, personInput.value, dayInput.value)
    newTask.init();
}

sortBtn.onclick = function () {
    allTasksContainer.removeChild(allTasks);
    var nodes = [].slice.call(allTasks.getElementsByTagName('li'), 0);
    [].sort.call(nodes, function (a, b) {
        return b.dataset.dayText < a.dataset.dayText ? 1 : b.dataset.dayText > a.dataset.dayText ? -1 : 0;
    });
    while (allTasks.firstChild) {
        allTasks.removeChild(allTasks.firstChild);
    }
    nodes.forEach(function (node) {
        allTasks.appendChild(node);
    });
    allTasksContainer.appendChild(allTasks);
}