每當我單擊列表項時，我都會嘗試打開和關閉課程。我嘗試過幾種方法，例如使用 classList.toggle 并將列表元素包裝在錨標記中，然后嘗試通過該方法將類添加到列表項中，但是我嘗試的東西越多，我就越感到困惑。下面是我的代碼片段。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 代碼，想知道為什么我這樣做，因為我此時非常困惑，這是我嘗試的最后一件事。
5 回答
蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
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貢獻1828條經驗 獲得超13個贊
在我看來，向元素添加一個事件偵聽器ul比為li元素添加多個事件偵聽器更好。
您可以使用classList.add("class")和classList.remove("class")功能。您還需要檢查當前項目是否已經具有該類，以便使用該classList.contains("class")函數。
這是一個示例（使用三元運算符更新）：
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貢獻1805條經驗 獲得超10個贊
您必須使用“this”關鍵字來引用當前單擊的元素。您可以像這樣使用 JQuery 來實現此目的。
li.active { text-decoration : line-through; }
$("li").click(function () {
this.classList.toggle('active');
});
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
問題在于范圍。
function addDoneClass() {
li.className = "done"
}
在您的上下文中， li 是列表項的數組。如果不運行，我猜想單擊任何列表項都會刪除所有列表項。相反，您需要傳遞要更改的特定列表項。
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貢獻1864條經驗 獲得超6個贊
querySelectorAll返回一個節點列表，addEventLister一次只能應用于一個節點。因此，要修復您的代碼，您應該循環遍歷li列表中的每個代碼。由于您將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 關注
- 233 瀏覽
添加回答
舉報
0/150
提交
取消