將CSS類應用於每個 <li> 通過遍歷元素
[英]Applying a CSS class to each <li> element by looping through it
問題描述
我正在用Javascript創建一個簡單的待辦事項清單，並添加了元素。 現在我只想向無序列表中的每個li元素添加一個簡單的CSS類。 請指導我我錯了。
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);
.done{ text-decoration: line-through; }
<!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>
對我來說似乎正確，但該課程不適用於單擊li元素。 任何幫助將不勝感激。 先感謝您。
3 個解決方案
解決方案1
2 已采納 2018-05-27 14:28:33
我假設您想分別打開和關閉每個元素。 邏輯是這樣的：在文檔加載時將所有li硬編碼到ul （通過執行document.addEventListener("DOMContentLoaded", ... ），將click事件一個接一個地附加到它們上，並且每當有一個新項添加的click事件在創建后立即將其綁定到它。值得注意的是，您將事件綁定到單個DOM元素而不是整個類，並且隨后的添加元素需要再次處理。另一方面，整個過程可以簡化（很多）通過使用jQuery庫。
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);
.done{ text-decoration: line-through; }
<!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>
解決方案2
0 2018-05-27 14:16:28
在createListElement函數中，在創建li之后添加以下代碼：li.classList.add（“ done”）;
解決方案3
-1 2018-05-27 14:12:44
使用它，支持所有瀏覽器，不需要jquery，等等。
[].forEach.call(document.querySelectorAll('li'),function(li){
li.className = 'myclass';
});
jQuery遍歷每個li並檢查一個類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.