Question

我在Javascript中创建一个简单的待办事项列表，我完成了添加元素。现在我只想为无序列表中的每个li元素添加一个简单的CSS类。请指导我错在哪里。

＆＃13;

var button = document.getElementById('button');
var input = document.getElementById('userinput');
var ul = document.getElementById("foo");
var items = ul.getElementsByTagName("li")[0];



function inputLength(){
return input.value.length > 0
}

function createListElement(){

    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

}

function addListAfterClick(){
if (inputLength()) {
    createListElement();
}
}

function addListAfterKeyPress(){
if (inputLength() && event.keyCode === 13) {
    createListElement();
}
}

function taskDone(){
    for(var i = 0; i < items.length; ++i){
    items[i].classList.toggle("done")
 }
}

items.addEventListener("click", taskDone);

button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeyPress);

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Javascript and DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>No <span style="color: green">EXCUSES</span> do it must!</h1>
<input id="userinput" type="text" name="tasks" placeholder="Enter 
task">
<button id="button">Enter</button>

<ul id = "foo">
<li>Drink milk</li>
<li>Write some code</li>
<li>Eat healthy </li>
<li>Pray</li>
</ul>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

＆＃13;

对我来说似乎是正确的但是该课程并未应用点击li元素。任何帮助将受到高度赞赏。先谢谢你。

Answer 1

我假设你想要单独打开和关闭每个元素。逻辑是这样的：将所有value硬编码到文档加载的li上（通过执行ul实现），将click事件逐个附加到它们，每当一个新的添加item会在创建后立即将click事件绑定到它。值得注意的是，您将事件绑定到单个DOM元素而不是整个类，并且需要再次处理后续添加的元素。另外，通过使用jQuery库可以简化（很多）整个过程。

＆＃13;

document.addEventListener("DOMContentLoaded", ...

＆＃13;

var button = document.getElementById('button');
var input = document.getElementById('userinput');
var ul = document.getElementById("foo");
var items;

function inputLength(){
return input.value.length > 0
}

function createListElement(){

    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    li.addEventListener("click", taskDone);
    input.value = "";

}

function addListAfterClick(){
if (inputLength()) {
    createListElement();
}
}

function addListAfterKeyPress(){
if (inputLength() && event.keyCode === 13) {
    createListElement();
}
}

function taskDone(e){
  e.target.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);

document.addEventListener("DOMContentLoaded", function(event) {
  for (let x of document.getElementsByTagName("li")) x.addEventListener("click", taskDone); 
});

input.addEventListener("keypress", addListAfterKeyPress);

＆＃13;

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

＆＃13;

Answer 2

在createListElement函数中创建li后添加此代码： li.classList.add（ “完成”）;

Answer 3

使用它，支持所有浏览器，不需要jquery等...

[].forEach.call(document.querySelectorAll('li'),function(li){
   li.className = 'myclass';
});

通过循环遍历每个<li>元素应用CSS类

3 个答案: