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

您需要检查大写字母org.apache.oozie.command.CommandException: E0800: Action it is not running its in [KILLED] state, action [0006849-180819131048313-oozie-oozi-W@MysparkApplication] at org.apache.oozie.command.wf.CompletedActionXCommand.eagerVerifyPrecondition(CompletedActionXCommand.java:92) at org.apache.oozie.command.XCommand.call(XCommand.java:258) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at org.apache.oozie.service.CallableQueueService$CallableWrapper.run(CallableQueueService.java:178) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748)。对于不区分大小写的搜索，请使用LI，并且没有ID为localeCompare的元素

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

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

3 个答案: