Question

我正在努力创建一个待办事项列表，例如＆＃34; app＆＃34;允许您添加和删除列表中的项目。我目前拥有的代码允许您添加和删除，但如果添加相同的＆＃34;待办事项＆＃34;，则只需添加两次。我想这样，当我添加与列表中已有的项目相同的项目时，它会显示＆＃34; x2＆＃34;在项目旁边。我也希望这样，当你按下项目的x按钮时，如果它与＆＃34; x2＆＃34;在那里，那么再将其设为一个。

这是我目前的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="myDIV" class="header">
  <h2 style="margin:5px">My To Do List</h2>
  <input type="text" id="myInput" placeholder="Title...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL">
  <li>Hit the gym</li>
  <li class="checked">Pay bills</li>
  <li>Meet George</li>
  <li>Buy eggs</li>
  <li>Read a book</li>
  <li>Organize office</li>
</ul>

<script>
// Create a "close" button and append it to each list item
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);
}

// Click on a close button to hide the current list item
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";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
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 something!");
  } else {
    document.getElementById("myUL").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";
    }
  }
}
</script>

</body>
</html>

非常感谢你！

Answer 1

试试这样。

我们在这里检查待办事项是否已存在于列表中。

如果是，则在X范围内为此添加一个带有计数器值的范围，如果再次添加相同的项目，则继续添加此计数器。

删除逻辑也将被更改，并将检查计数器跨度是否存在，如果是，则对计数器进行减量。如果计数器为1，则按照当前逻辑隐藏父div。

.close {
  padding-left: 10px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div id="myDIV" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Title...">
    <span onclick="newElement()" class="addBtn">Add</span>
  </div>

  <ul id="myUL">
    <li>Hit the gym</li>
    <li class="checked">Pay bills</li>
    <li>Meet George</li>
    <li>Buy eggs</li>
    <li>Read a book</li>
    <li>Organize office</li>
  </ul>

  <script>
    // Create a "close" button and append it to each list item
    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);
    }

     // Click on a close button to hide the current list item
    var close = document.getElementsByClassName("close");
    var i;
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement;
        if (this.querySelector(".counter") == null) {
          div.style.display = "none";
        } else {
          var count = parseInt(this.querySelector(".counter").textContent);

          if (count <= 1) {
            div.style.display = "none";
            count--;
            this.querySelector(".counter").textContent = count;
          } else {
            count--;
            this.querySelector(".counter").textContent = count;
          }

        }
      }
    }

     // Add a "checked" symbol when clicking on a list item
    var list = document.querySelector('ul');
    list.addEventListener('click', function(ev) {
      if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
      }
    }, false);

     // Create a new list item when clicking on the "Add" button
    function newElement() {


      var isExisting = false;
      var existingArray = [];
      var inputValue = document.getElementById("myInput").value;
      var list = document.querySelectorAll("#myUL li");

      [].forEach.call(list, function(el) {
        [].forEach.call(el.childNodes, function(elem) {
          if (elem.nodeType == 3) {
            if (elem.nodeValue == inputValue) {
              isExisting = true;
              var span = elem.nextElementSibling;
              if (span.querySelector(".counter") == null) {
                var countSpan = document.createElement("span");
                var counter = 2;
                if (elem.parentElement.style.display == "none") {
                  counter = 1;
                  elem.parentElement.style.display = "list-item";
                }


                var count = document.createTextNode(counter);
                countSpan.className = "counter";
                countSpan.appendChild(count);
                span.appendChild(countSpan);

              } else {

                elem.parentElement.style.display = "list-item";
                var count = parseInt(span.querySelector(".counter").textContent);
                count++;
                span.querySelector(".counter").textContent = count;
              }


            }

          }
        });
      });


      if (isExisting === false) {
        var li = document.createElement("li");
        var t = document.createTextNode(inputValue);
        li.appendChild(t);
        if (inputValue === '') {
          alert("You must write something!");
        } else {
          document.getElementById("myUL").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;
            if (this.querySelector(".counter") == null) {
              div.style.display = "none";
            } else {
              var count = parseInt(this.querySelector(".counter").textContent);

              if (count <= 1) {
                div.style.display = "none";
                count--;
                this.querySelector(".counter").textContent = count;
              } else {
                count--;
                this.querySelector(".counter").textContent = count;
              }
            }
          }
        }
      }
    }
  </script>

</body>

</html>

如何制作一个简单的待办事项列表类型的东西

1 个答案: