待办事项列表 JavaScript

阿拉哈特

我需要它的代码。

如果我删除一个nth-child（奇数/偶数）列表，它会关闭，但下一个列表与上面列表的颜色匹配。

每个列表应该是不同的颜色（第 n 个孩子（来自偶数和奇数））。这需要在javascript中完成。

如果列表已经存在并带有名称，则会出现一条消息（“它已经存在。”）并且不会添加到列表中。

当我点击列表，从点击的列表的文本应可以切换，之间margin-left: 0;和margin-left: 50px;未选中时，并检查（如果你点击它会检查列表和未选中的）。

以及我应该放置代码的区域。

* {
  margin: 0;
  padding: 0;
}

#Header {
  padding: 50px;
  background-color: black;
  color: white;
}

#myInput {
  padding: 20px;
  width: 300px;
  height: auto;
  background-color: black;
  color: white;
  border: 2px solid white;
  outline: none;
}

#Add {
  padding: 18.5px;
  background-color: black;
  color: white;
  border: 2px solid white;
  outline: none;
  margin-left: ;
  margin-top: ;
  position: absolute;
  cursor: pointer;
}

#myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#myUL li {
  padding: 20px;
  background-color: black;
  color: white;
  border: 1px solid white;
  opacity: 0.9;
  cursor: pointer;
  transition: 0.4s;
}

#myUL li:nth-child(odd) {
  background-color: black;
  color: white;
  opacity: 0.8;
}

#myUL li:nth-child(even) {
  background-color: black;
  color: white;
  opacity: 1;
}

#myUL li.checked {
  text-decoration: line-through;
  opacity: 0.4;
}

#myUL li.checked:before {
  content: "";
  width: 20px;
  height: 10px;
  border-left: 5px solid white;
  border-bottom: 5px solid white;
  position: absolute;
  transform: rotate(-45deg);
}

.sp.checkedsp {
  margin-left: 50px;
}

.sp {
  margin-left: 0px;
}

.close {
  float: right;
  padding: 10px;
  margin-top: -10px;
  margin-right: -10px;
  background-color: white;
  color: black;
  opacity: 1;
  cursor: pointer;
}

.close:hover {
  background-color: #2196f3;
  color: white;
  opacity: 1;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
  <div id="Header">
    <input type="text" placeholder=" Type your text" id="myInput" />
    <span id="Add" onclick="newElement()">Add</span>
  </div>
  <ul id="myUL">
    <li><span class="sp">ASQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASadQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASffffQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASQgeryyyyyyym<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASQgvvvvvm<span class="close">&times;</span></span>
    </li>
  </ul>
  <p id="EText"></p>
  <script>
    var input = document.getElementById("myInput");
    var A = [];
    var i;
    var ul = document.getElementById("myUL");
    var list = document.getElementsByTagName("li");
    var etext = document.getElementById("EText");
    var sp = document.getElementsByClassName("sp");
    var close = document.getElementsByClassName("close");

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

    ul.addEventListener("click", function(n) {
      if (n.target.tagName === "LI") {
        n.target.classList.toggle("checked");
      }
    }, false);

    function newElement() {
      var inputvalue = document.getElementById("myInput").value;
      var i;
      var createli = document.createElement("li");

      var span = document.createElement("span");
      span.className = "sp";

      var span2 = document.createElement("span");
      span2.className = "close";

      var closetext = document.createTextNode("\u00D7");
      var txt = document.createTextNode(inputvalue);

      if (inputvalue == "") {
        alert("Write something.");
      } else {
        if (A.indexOf(inputvalue) > -1) {
          etext.innerHTML = "already Exists";
        } else {
          var addlist = {
            a: ul.appendChild(createli),
            b: createli.appendChild(span),
            c: span.appendChild(txt),
            d: span.appendChild(span2),
            e: span2.appendChild(closetext)
          }
          A.push(txt);
        }
      }
      input.value = "";

      for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
          this.parentElement.parentElement.style.display = "none";
        }
      }
    }
  </script>
</body>
</html>

法鲁克哈尼夫

为什么你的项目没有交替？

因为您在关闭项目时隐藏了项目。当您使用偶数和奇数nth 子选择器时，您需要删除项目而不是隐藏它们。

选中项目时如何向文本添加左边距？

只需添加以下内容：

.checked .sp {
  margin-left: 50px;
}

* {
  margin: 0;
  padding: 0;
}

#Header {
  padding: 50px;
  background-color: black;
  color: white;
}

#myInput {
  padding: 20px;
  width: 300px;
  height: auto;
  background-color: black;
  color: white;
  border: 2px solid white;
  outline: none;
}

#Add {
  padding: 18.5px;
  background-color: black;
  color: white;
  border: 2px solid white;
  outline: none;
  margin-left: ;
  margin-top: ;
  position: absolute;
  cursor: pointer;
}

#myUL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#myUL li {
  padding: 20px;
  background-color: black;
  color: white;
  border: 1px solid white;
  opacity: 0.9;
  cursor: pointer;
  transition: 0.4s;
}

#myUL li:nth-child(odd) {
  background-color: black;
  color: white;
  opacity: 0.8;
}

#myUL li:nth-child(even) {
  background-color: black;
  color: white;
  opacity: 1;
}

#myUL li.checked {
  text-decoration: line-through;
  opacity: 0.4;
}

#myUL li.checked:before {
  content: "";
  width: 20px;
  height: 10px;
  border-left: 5px solid white;
  border-bottom: 5px solid white;
  position: absolute;
  transform: rotate(-45deg);
}

.sp.checkedsp {
  margin-left: 50px;
}

.sp {
  margin-left: 0px;
}

.close {
  float: right;
  padding: 10px;
  margin-top: -10px;
  margin-right: -10px;
  background-color: white;
  color: black;
  opacity: 1;
  cursor: pointer;
}

.close:hover {
  background-color: #2196f3;
  color: white;
  opacity: 1;
}

.checked .sp {
  margin-left: 50px;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
  <div id="Header">
    <input type="text" placeholder=" Type your text" id="myInput" />
    <span id="Add" onclick="newElement()">Add</span>
  </div>
  <ul id="myUL">
    <li><span class="sp">ASQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASadQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASffffQm<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASQgeryyyyyyym<span class="close">&times;</span></span>
    </li>
    <li><span class="sp">ASQgvvvvvm<span class="close">&times;</span></span>
    </li>
  </ul>
  <p id="EText"></p>
  <script>
    var input = document.getElementById("myInput");
    var A = [];
    var i;
    var ul = document.getElementById("myUL");
    var list = document.getElementsByTagName("li");
    var etext = document.getElementById("EText");
    var sp = document.getElementsByClassName("sp");
    var close = document.getElementsByClassName("close");

    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var parent = this.parentElement.parentElement.parentElement;
        var child = this.parentElement.parentElement;
        parent.removeChild(child);
      }
    }

    ul.addEventListener("click", function(n) {
      if (n.target.tagName === "LI") {
        n.target.classList.toggle("checked");
      }
    }, false);

    function newElement() {
      var inputvalue = document.getElementById("myInput").value;
      var i;
      var createli = document.createElement("li");
      
      var span = document.createElement("span");
      span.className = "sp";

      var span2 = document.createElement("span");
      span2.className = "close";

      var closetext = document.createTextNode("\u00D7");
      var txt = document.createTextNode(inputvalue);

      if (inputvalue == "") {
        alert("Write something.");
      } else {
        if (A.indexOf(inputvalue) > -1) {
          etext.innerHTML = "already Exists";
        } else {
          var addlist = {
            a: ul.appendChild(createli),
            b: createli.appendChild(span),
            c: span.appendChild(txt),
            d: span.appendChild(span2),
            e: span2.appendChild(closetext)
          }
          A.push(txt);
        }
      }

      input.value = "";

      for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
          var parent = this.parentElement.parentElement.parentElement;
          var child = this.parentElement.parentElement;
          parent.removeChild(child);
        }
      }
    }
  </script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。