所以我试图制作一个元素列表，当我单击它们时，它会切换一个类“完成”。我试图不使用 jQuery。
这是我到目前为止的想法:
目前，我的问题是我能够将元素作为 li 添加到列表中，但只有所有其他元素都会在单击时添加“完成”类。
有人可以解释一下为什么会这样吗？一直很困惑。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Shopping list</h1>
<br>
<input id="userInput" placeholder="enter item" type="text">
<button id="button">enter</button>
<br>
<ul class="list">
</ul>
</body>
<script src="script.js"></script>
</html>
JS:
var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");
// strikethrough task on click
function strike() {
for(var i = 0; i < li.length; i++)
{
li[i].addEventListener('click',function() {
if(this.classList.contains("iteJm")) {
this.classList.toggle("done");
}
});
}
}
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
li.classList.add('item');
input.value = '';
strike();
}
function addToListAfterClick() {
if(inputLength() > 0) {
createListElement();
}
}
function addToListAfterEnter(event) {
if(inputLength() > 0 && event.keyCode == 13) {
createListElement();
}
}
button.addEventListener('click',addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);
这是 CSS:
.done {
text-decoration: line-through;
}
最佳答案
您在 this.classList.contains("iteJm") 中注意到了额外的 J，而不是拼写错误，您将多个点击事件附加到元素，所以每次新添加一个新的li事件都会附加到所有li的是什么导致点击事件工作不正常，我建议你附加点击当您创建 li 时:
li.addEventListener('click', strike);
如果事件附加两次，切换功能将添加和删除类，您将看不到任何更改，如果添加三次，将添加、删除然后添加，添加时您将看到该类，依此类推第四个 li 第一个将有 4 个点击事件，当您点击时您会发现没有任何变化...
var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");
// strikethrough task on click
function strike() {
if (this.classList.contains("item")) {
this.classList.toggle("done");
}
}
function inputLength() {
return input.value.length;
}
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
li.classList.add('item');
input.value = '';
li.addEventListener('click', strike);
}
function addToListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addToListAfterEnter(event) {
if (inputLength() > 0 && event.keyCode == 13) {
createListElement();
}
}
button.addEventListener('click', addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);.done {
text-decoration: line-through;
}<h1>Shopping list</h1>
<br>
<input id="userInput" placeholder="enter item" type="text">
<button id="button">enter</button>
<br>
<ul class="list">
</ul>关于javascript - onClick 仅适用于所有其他 li，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51882530/