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

【问题标题】：Javascript - Lists created through user input with a sort buttonJavascript - 使用排序按钮通过用户输入创建的列表
【发布时间】：2018-08-08 03:53:30
【问题描述】：

我想要什么：用户在输入栏中输入单词 -> 用户按下添加按钮 -> 单词被添加到两个列表“unsortedUL”和“sortedUL” -> 用户按下排序按钮 -> 列表“sortedUL”被排序降序（za），而“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>

【问题讨论】：

请将您的问题简化为一个更简单的示例，并考虑提供一个小提琴 (jsfiddle.net)
我应该澄清一下，目前我需要添加代码，让我将输入的单词复制到一个名为“unsortedUL”的列表中，当用户按下排序按钮时，该列表不会被排序。如果您将其复制并粘贴到 txt.html 文档中并使用浏览器运行它，您应该能够看到网站的功能、工作原理以及我需要什么。这是 jsFiddle jsfiddle.net/hdu49u53/1 的链接

标签： javascript html list sorting input

【解决方案1】：

您必须克隆 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>

【讨论】：

不客气。也许考虑创建一个创建 HTML 节点的函数。会更干净。你也可以投票给我的答案吗？ :)
没问题，我之前点击了upvote，但我认为它说它没有记录新手upvotes，所以我没有打扰。我赞成并将您的答案切换为正确的答案，因为我最终使用了您的解决方案。但是，the_hobbes 解决方案确实有效，我在实际更改代码时使用了您的解决方案。

【解决方案2】：

虽然您需要列表，但您可以使用 Javascript 数组在这里你可以有两个数组，分别是 SortedList 和 UnsortedList 我已经在全球范围内声明了这两个列表，以便您可以对一个列表进行排序并保留一个列表而无需更改请参阅以下代码了解工作流程

<!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 将打印正常数据。

【讨论】：

【解决方案3】：

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

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

你应该像这样添加第二行：

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

如果您之前尝试过，节点克隆可能是您所缺少的，否则它会移动相同的元素并最终只出现在一个列表中。 'true' 参数会进行深层复制，因此它下面的文本节点也会被复制。

顺便说一句，使用 jQuery 会更轻松地完成整个操作，这是该库旨在进行的那种 DOM 操作。然而，人们很快就跳到了 jQuery 上，你用原生 JavaScript 来做这件事很好。

【讨论】：

是的，这行得通！几天前我实际上尝试过，但我没有添加 "(li.cloneNode(true)); 所以当时它不起作用。非常感谢！