javascript - 按特定顺序列出 li 文本

问题描述

我有一个任务应用程序，我在其中输入时间和任务，该应用程序将它们添加到列表中。它还根据一天中的时间列出它们，例如在下午任务之前列出的上午任务。我希望在任务之前列出时间。目前时间列在任务之后。另外，是否可以在时间和任务之间添加“-”或。

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
 close[i].onclick = function () {
  var div = this.parentElement;
  div.style.display = "none";
 }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
 if (ev.target.tagName === 'LI') {
  ev.target.classList.toggle('checked');
 }
}, false);
// order according to time
var arr = [];
// order according to time

// Create a new list item when clicking on the "Add" button
function newElement() {
 var li = document.createElement("li");

 li.className = "column";
 li.draggable = "true"
 // order according to time
 li.setAttribute("data-time", document.getElementById("myInput1").value);
 // order according to time
 var inputValue = document.getElementById("myInput").value;

 var inputValue1 = document.getElementById("myInput1").value;


 var t = document.createTextNode(inputValue);
 li.appendChild(t);

 var tt = document.createTextNode(inputValue1);
 li.appendChild(tt);

 if (inputValue === '') {
  alert("You must write a task!");
 } else {

  document.getElementById("columns").appendChild(li);
  // order according to time

  setTimeout(function () {
   var sortItems = document.querySelectorAll("[data-time]");
   var elemArray = Array.from(sortItems);
   elemArray.sort(function (a, b) {
    if (a.getAttribute('data-time') < b.getAttribute('data-time')) { return -1 } else { return 1 }
   });
   document.getElementById("columns").innerHTML = "";

   elemArray.forEach(appendFunction);


   function appendFunction(item, index) {
    document.getElementById("columns").innerHTML += item.outerHTML;
   }
  }, 200);
  // order according to time

 }
 document.getElementById("myInput").value = "";
 document.getElementById("myInput1").value = "";

 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 li.appendChild(span);

 for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
   var div = this.parentElement;
   div.style.display = "none";
  }
 }
}


// Add tasks by pressing enter
// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function (event) {
 // Number 13 is the "Enter" key on the keyboard
 if (event.keyCode === 13) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Trigger the button element with a click
  document.getElementById("myBtn").click();
 }
});

#myInput1 {
 width: 130px;
 height: 36px;
 margin-right: 10px;
 /* margin-left: -40px; */
 /* padding: 10px; */
 /* color: red; */
 /* box-sizing: border-box; */
 /* background-color: blue; */
 /* display: inline-block; */
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;

}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #DCEDC2;
  font-size: 18px;
  transition: 0.2s;
  color: rgb(94, 91, 91);

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #FFD3B5;
}

/* Darker background-color on hover */
ul li:hover {
  background: #A8E6CE;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #ff8c94;
  color: white;
}

/* Style the header */
.header {
  background-color: #ff8c94;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
 }

/* Style the "Add" button */
/* .addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
} */

/* .addBtn:hover {
  background-color: #bbb;
} */

<div id="myDIV" class="header">
  <h2>My Daily Tasks</h2>
  <p>Add a time and task then press enter</p>
  <input type="time" id="myInput1">
  <input name="text" type="text" id="myInput" placeholder="My task...">

  <span onclick="newElement()" class="addBtn" id="myBtn"></span>
 </div>
 <ul id="columns">
  <li class="column" draggable="true">w</li>
  <li class="column" draggable="true">ff</li>
  <li class="column" draggable="true">uuu</li>
 </ul>

标签： javascript

javascript - 按特定顺序列出 li 文本

问题描述

解决方案

推荐阅读