小贝子编程

JavaScript-通过用户输入创建的使用排序按钮创建的列表



我想要的内容：用户类型Word到输入栏 ->用户按添加按钮 -> Word添加到两个列表" UnsortEdul"one_answers" sortedul"one_answers" sortedul" ->用户按下sorts stort按钮 ->列表" sortedul"通过降序(z-a(进行排序，而" unsortedul"仍然是用户输入的方式。

我无法弄清楚如何获得两个列表，而其中只有一个是分类的。

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);
}
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";
  }
}
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write a word!");
  } else {
    document.getElementById("sortedUL").appendChild(li);
  }
  document.getElementById("myInput").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";
    }
  }
}
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("sortedUL");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {           
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
document.getElementById("date").innerHTML = new Date().toDateString();
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();
body {
  margin: 0;
  min-width: 250px;
  background-color: green;
}
* {
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
  width: 100%;
  float: right;
}
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: number;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}
.header {
  background-color: green;
  padding: 30px 40px;
  color: white;
  text-align: center;
}
.header:after {
  content: "";
  display: table;
  clear: both;
}
input {
  border: none;
  width: 50%;
  padding: 10px;
  float: center;
  font-size: 16px;
}
.addBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: right;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
.sortBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
<!DOCTYPE html>
<html>
<title>Assignment Two</title>
<body>
  <h1 style="color:white;"align="center"id="date"></h1>
  <h1 style="color:white;"align="center"id="time"></h1>
  <div id="myDIV" class="header">
    <h2 style="margin:5px">Enter a list of words</h2>
    <input type="text" id="myInput" placeholder="Word...">
    <span onclick="newElement()" class="addBtn">Add</span>
    <span onclick="sortList()" class="sortBtn">Sort</span>
  </div>
  <ul id="sortedUL">
  </ul>
  <ul id="unsortedUL">
  </ul>
</body>
</html>

您必须克隆HTML节点以将其附加两次。或像我一样创建两次。

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);
}
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";
  }
}
function newElement() {
  if (inputValue === '') {
    alert("You must write a word!");
  } else {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("sortedUL").appendChild(li);
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("unsortedUL").appendChild(li);
  }
  document.getElementById("myInput").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";
    }
  }
}
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("sortedUL");
  switching = true;
  while (switching) {
    switching = false;
    b = list.getElementsByTagName("LI");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {           
        shouldSwitch= true;
        break;
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
document.getElementById("date").innerHTML = new Date().toDateString();
document.getElementById("time").innerHTML = new Date().toLocaleTimeString();
body {
  margin: 0;
  min-width: 250px;
  background-color: green;
}
* {
  box-sizing: border-box;
}
p {
  font-size: 16px;
  margin-left: 20px;
  color: white;
  text-transform: uppercase;
}
ul {
  margin: 0 0 20px 0;
  padding: 0;
  width: 100%;
  float: right;
}
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: number;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}
.header {
  background-color: green;
  padding: 30px 40px;
  color: white;
  text-align: center;
}
.header:after {
  content: "";
  display: table;
  clear: both;
}
input {
  border: none;
  width: 50%;
  padding: 10px;
  float: center;
  font-size: 16px;
}
.addBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: right;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
.sortBtn {
  padding: 10px;
  width: 10%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}
<!DOCTYPE html>
<html>
<title>Assignment Two</title>
<body>
  <h1 style="color:white;"align="center"id="date"></h1>
  <h1 style="color:white;"align="center"id="time"></h1>
  <div id="myDIV" class="header">
    <h2 style="margin:5px">Enter a list of words</h2>
    <input type="text" id="myInput" placeholder="Word...">
    <span onclick="newElement()" class="addBtn">Add</span>
    <span onclick="sortList()" class="sortBtn">Sort</span>
  </div>
  <p>Sorted</p>
  <ul id="sortedUL">
  </ul>
  <p>Unsorted</p>
  <ul id="unsortedUL">
  </ul>
</body>
</html>

当您需要列表时，可以使用JavaScript数组在这里，您可以有两个阵列，这些阵列将是排序列表和unsortledlist我已经在全球声明列表，以便您可以对一个列表进行排序并保留一个列表而无需更改请参阅以下代码以获取工作流程

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form>
        <div>
            <input type="text" name="txtName" id="txtName"/>
            <input type="button" value="Add" onclick="AddToList()"/>
            <input type="button" value="Sort" onclick="SortList()"/>
        </div>
    </form>
</body>
</html>
<script>
    var sortedList = [];
    var unsortedList = [];
    function AddToList() {
        var data = document.getElementById("txtName").value;
        sortedList.push(data);
        unsortedList.push(data);
    }
    function SortList() {
        sortedList.sort();
        sortedList.reverse();
        console.log(sortedList);
        console.log(unsortedList);
    }
</script>

在这里我创建了两个按钮并调用一个函数进行排序，而其他函数则添加在列表中。正如您所说，您需要未分类的列表，因此在SortList()函数中，我们已经打印了sortedList和unsortedList，两个都看到一个差异。

正如预期的sortedList将打印降序数据，unsortedList将打印正常数据。

您只需要在添加每个单词时将其插入两个列表中，即您的位置：

document.getElementById("sortedUL").appendChild(li);

您应该添加这样的第二行：

document.getElementById("unsortedUL").appendChild(li.cloneNode(true));

如果您以前尝试过，则可能是您缺少的节点，否则它将移动相同的元素，并且最终仅在一个列表中。" True"论点会进行深层副本，以便复制其下面的文本节点。

顺便说一句，对于jQuery来说，整个操作将变得容易得多，这是图书馆的操作。但是，人们如此迅速地跳到jQuery，与Vanilla JavaScript一起做真是太好了。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium