每当我单击列表项时,我都会尝试打开和关闭类(class)。我尝试过几种方法,例如使用 classList.toggle 并将列表元素包装在 anchor 标记中,然后尝试通过该方法将类添加到列表项,但我尝试的东西越多,我就越感到困惑。
下面是我的代码片段。
var li = document.querySelectorAll("li");
li.addEventListener('click', (e) => {
addDoneClass();//
});
function addDoneClass() {
li.className = "done"
}
.done {
text-decoration: line-through;
}
<ul>
<li random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
你可能会看着我的 JavaScript 代码,想知道为什么我这样做,因为我此时非常困惑,这是我尝试的最后一件事。
最佳答案
const elements = document.querySelectorAll("li");
elements.forEach((element) => {
// First option
element.addEventListener('click', function() {
this.classList.toggle('active');
});
// Second option
//element.addEventListener('click', function() { customHandle(this); });
// Third option
//element.addEventListener('click', (e) => customHandle(e.target.closest('li')));
});
// For the second and third options
//function customHandle(element) {
// element.classList.toggle('active');
//}
li.active {
text-decoration: line-through;
}
<ul>
<li>Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
关于javascript - 每当我单击列表项时,如何打开和关闭类(class)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61016963/