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

Question

所以我正在尝试制作一个简单的待办事项列表应用程序。我想添加 class "checked" 以在单击时列出项目。我试图使用事件委托来做到这一点，但我认为我做的不正确。我不确定我应该使用 "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

你可以使用 .delegate

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

Answer 2

你们真的很亲密！

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

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

How to use event listener to toggle class to individual list item

javascript

css

onclick

toggle

addeventlistener