Question

我想要的：用户在输入栏中输入单词 - ＆gt;用户按下添加按钮 - ＆gt;单词被添加到两个列表＆＃34; unsortedUL＆＃34; && 34; sortedUL＆＃34; - ＆gt;用户按下排序按钮 - ＆gt;列表＆＃34; sortedUL＆＃34;按降序排序（z-a），而＆＃34; unsortedUL＆＃34;仍然是用户输入它的确切方式。

我无法弄清楚如何获得两个列表，而只有一个列表被排序。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您必须克隆HTML节点才能将其追加两次。或者像我一样创建它两次。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当您需要列表时，您可以使用Javascript数组在这里你可以有两个Arrays，它们是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将打印正常数据。

Answer 3

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

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

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

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

如果您之前尝试过，节点克隆可能就是您所缺少的，否则它会移动相同的元素，并且最终只会出现在一个列表中。真实的＆＃39;参数进行深层复制，以便复制它下面的文本节点。

顺便说一句，使用jQuery可以轻松完成整个操作，它是图书馆所要求的那种DOM操作。然而，人们如此迅速地跳到jQuery，并且使用vanilla JavaScript进行jQuery很不错。

Javascript - 使用排序按钮

3 个答案: