Question

我创建了一个项目列表，其中包含诸如任务名称（即取出垃圾），必须执行任务以及任务需要完成的星期几等信息。所有这些信息都是通过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();


}

Answer 1

有一个in-built javascript函数有助于获取day of the week。

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

date.getDay()分别从0向6返回sunday到saturday的值

//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();

Answer 2

(javascript) 
//define your task objects as an array (outside of TaskObject)
  var tasks = [];

 //retrieve a number rather than a text value
 var dayInput = document.getElementById('dayInput').selectedIndex

var newTask = ...
//add this task object to the Task array
tasks.push(newTask)

//now you can sort the array:
tasks.sort(function(a, b){return a.dayInput-b.dayInput});

 (html)
 <select id="dayInput">
 <option value="0">Monday</option>
 <option value="1">Tuesday</option>
 <option value="2">Wednesday</option>
 <option value="3">Thursday</option>
 <!-- etc..  -->
 </select>

Answer 3

这是我解决您问题的方法。创建新li后，您将存储名为＆＃34; data-day-text＆＃34;的隐藏属性。并将其附加到li。排序时，从DOM中删除ul（为了提高性能），根据li对data-day-text进行排序，然后重新附加li和ul。

http://jsfiddle.net/g3et9abh/3/

HTML：

<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>

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);
}

按星期几列出一个列表

3 个答案: