待办事项列表JavaScript

时间：2018-07-22 16:30:31

标签： javascript html css

我需要它的代码。

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

每个列表应使用不同的颜色（第n个孩子（从偶数和奇数开始））。这需要用javascript完成。

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

当我单击列表时，如果未选中和选中，则单击的列表中的文本应在margin-left: 0;和margin-left: 50px;之间切换（如果单击列表，它将被选中和取消选中）。 / p>

我应该在哪个区域放置代码。

* {
  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>

2 个答案:

答案 0 :(得分：1)

尝试一下：

    A.push(inputvalue);

因为您检查了该值是否在数组中而不是文本节点中

答案 1 :(得分：1)

为什么您的商品没有交替显示？

因为关闭某个项目时您隐藏了这些项目。您需要删除项目，而不要像使用偶数和奇数第n个子选择器一样隐藏它们。

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

只需添加以下内容：

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

相关问题
最新问题