如何使用事件侦听器将类切换到单个列表项

Question

所以我想做一个简单的待办事项列表应用程序。我想在单击项目时将“已检查”类添加到列表项中。我试图使用事件委托来做到这一点，但我认为我没有正确地做到这一点。我不确定是否应该使用“addEventListener”或“onclick”。真的有什么区别？我对javascript有点新鲜，所以如果你能解释一下，我会很感激。

<div id="todoList">
    <h1>To Do List</h1>
      <form id="todoForm">
        <input id="todoInput">
        <button type="button" onclick="todoList()">Click Here</button>
      </form>
    <div id="listText">
      <ul id="list">
      </ul>
    </div>
  </div>

CSS

#todoList {
  display: block;
  text-align:center;
}
li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black

}
#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

ul li.checked {
  text-decoration: line-through;
}

剧本

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


  var ul = document.getElementById("ul");
  ul.addEventListener("click", function(e) {
    if (e.target.tagName === "li"){
      e.target.classList.toggle("checked");
    }

  });

Answer 1

你真的很亲密！

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}

var ul = document.getElementById("list");
  ul.addEventListener("click", function(e) {
  if (e.target.tagName === "LI"){
    e.target.classList.toggle("checked");
  }
});

你的第一个问题是你在做document.getElementById('ul')，你的ul元素的ID实际上是list。只是一个愚蠢的错误。

我实际上必须打开devtools并在你的条件中设置一个断点来检查点击的内容。

原来e.target.tagName正在评估LI而不是li。

只需要将支票更改为LI

至于如何使用事件。 onclick将和addEventListener做同样的工作。你通过事件委托在这里完成它的方式就像你要用vanilla JS一样好。这一切都归结为个人喜好在一天结束时，一些框架可能让你通过元素属性设置事件，有些框架可以让你用事件监听器设置它们，你可以根据需要混合搭配。这真的取决于你和你的团队（如果它是一个合作项目）。

Answer 2

你可以使用.delegate

$(document).delegate('h', 'click', function () {
        var id = this.id;
        document.getElementById('chkod').value = id;
    });

Answer 3

您需要检查大写的LI。对于不区分大小写的搜索使用localeCompare并且没有id为ul的元素

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


var ul = document.getElementById("list");
ul.addEventListener("click", function(e) {
  if (e.target.tagName.localeCompare("li")) {

    e.target.classList.toggle("checked");
  }

});

#todoList {
  display: block;
  text-align: center;
}

li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black
}

#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

.checked {
  text-decoration: line-through;
}

<div id="todoList">
  <h1>To Do List</h1>
  <form id="todoForm">
    <input id="todoInput">
    <button type="button" onclick="todoList()">Click Here</button>
  </form>
  <div id="listText">
    <ul id="list">
    </ul>
  </div>
</div>