每當(dāng)我單擊列表項(xiàng)時(shí)，我都會(huì)嘗試打開和關(guān)閉課程。我嘗試過幾種方法，例如使用 classList.toggle 并將列表元素包裝在錨標(biāo)記中，然后嘗試通過該方法將類添加到列表項(xiàng)中，但是我嘗試的東西越多，我就越感到困惑。下面是我的代碼片段。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>你可能會(huì)看著我的 JavaScript 代碼，想知道為什么我這樣做，因?yàn)槲掖藭r(shí)非常困惑，這是我嘗試的最后一件事。
5 回答
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
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>
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
在我看來，向元素添加一個(gè)事件偵聽器ul比為li元素添加多個(gè)事件偵聽器更好。
您可以使用classList.add("class")和classList.remove("class")功能。您還需要檢查當(dāng)前項(xiàng)目是否已經(jīng)具有該類，以便使用該classList.contains("class")函數(shù)。
這是一個(gè)示例（使用三元運(yùn)算符更新）：
const ul = document.getElementById("list");
ul.addEventListener('click', (e) => {
? const li = e.target;
? li.classList.contains('done') ? removeDoneClass(li) : addDoneClass(li)
});
function addDoneClass(li) {
? li.classList.add("done");
}
function removeDoneClass(li) {
? li.classList.remove("done");
}
.done {
? text-decoration: line-through;
}
<ul id="list">
? <li random="23">Notebook</li>
? <li>Jello</li>
? <li>Spinach</li>
? <li>Rice</li>
? <li>Birthday Cake</li>
? <li>Candles</li>
</ul>
提示：使用classList.toggle("class")，它可以做同樣的事情，但它是更干凈的方式。
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
您必須使用“this”關(guān)鍵字來引用當(dāng)前單擊的元素。您可以像這樣使用 JQuery 來實(shí)現(xiàn)此目的。
li.active { text-decoration : line-through; }
$("li").click(function () {
this.classList.toggle('active');
});
慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
問題在于范圍。
function addDoneClass() {
li.className = "done"
}
在您的上下文中， li 是列表項(xiàng)的數(shù)組。如果不運(yùn)行，我猜想單擊任何列表項(xiàng)都會(huì)刪除所有列表項(xiàng)。相反，您需要傳遞要更改的特定列表項(xiàng)。
li.addEventListener('click', (e) => {
addDoneClass(this); //this is the list item being clicked.
});
function addDoneClass(obj) {
// Now you can change to toggle if you want.
obj.className = "done"
// ie obj.className.toggle("done");
}
慕尼黑的夜晚無繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
querySelectorAll返回一個(gè)節(jié)點(diǎn)列表，addEventLister一次只能應(yīng)用于一個(gè)節(jié)點(diǎn)。因此，要修復(fù)您的代碼，您應(yīng)該循環(huán)遍歷li列表中的每個(gè)代碼。由于您將event(evt) 與 一起使用addEventListener，因此您可以使用event.currentTarget來單擊該元素。
var listItems = document.querySelectorAll("li");
var listItemCount = listItems.length;
for (var i = 0; i < listItemCount; i++) {
? listItems[i].addEventListener('click', (evt) => {
? ? addDoneClass(evt);//
? });
}
function addDoneClass(evt) {
? evt.currentTarget.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>
- 5 回答
- 0 關(guān)注
- 228 瀏覽
添加回答
舉報(bào)
0/150
提交
取消