僅更改一種樣式 <li> 單擊元素

Question

我在uni中分配了一份工作，僅用HTML和javascript做購物清單。 當我單擊li元素時，應該將樣式更改為直通。 但是，當我嘗試執行此操作時，所有li元素都獲得了直通，而不僅僅是我單擊的元素。 我已經嘗試了很長時間來解決此問題，現在我的代碼根本無法正常工作..請幫助我

這是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Inköpslista</title>
</head>
<body>
<h2>Inköpslista</h2>
    <div>
    <input type="text" id="myInput" placeholder="Ange vara..."/>
    <button onclick="nyttElement()">Lägg till</button>
    </div>

    <ul id="myUL">
        <li>Kakor</li>
        <li>Bullar</li>
        <li style="text-decoration: line-through;">Nutella</li>
     </ul>
    <script src="lista.js"></script>
  </body>
 </html>

這是將新的li元素添加到我的列表的javascript ：

function nyttElement(){
    var newItem = document.createElement("li");
    var item = document.getElementById("myInput").value;
    var text = document.createTextNode(item);
    newItem.appendChild(text);
    document.getElementById("myUL").appendChild(newItem);
}

直到我嘗試添加eventListener為止，這都可以正常工作：

document.getElementById("myUL").addEventListener("click", function{
    var selectLi = document.querySelectorAll("li") 
    for (var i =0; i < selectLi.length; i++){
        selectLi[i].style.textDecoration = "line-through";
        selectLi[i].style.color = "red";
    }

    }
});

任何幫助，將不勝感激！

Answer 1

您的點擊事件監聽器適用於整個無序列表，您正在遍歷每個列表項並將其划掉。 如果您在每個單獨的列表項上偵聽click事件，則可以刪除被單擊的特定列表項。

 const listItems = document.querySelectorAll('#myUL > li') function addEventListener(li) { return li.addEventListener('click', function() { this.className = this.className == 'todo' ? 'done' : 'todo' }); } function nyttElement(){ var newItem = document.createElement('li'); var item = document.getElementById('myInput').value; var text = document.createTextNode(item); newItem.appendChild(text); newItem.className = 'todo'; addEventListener(newItem); document.getElementById('myUL').appendChild(newItem); } listItems.forEach(li => addEventListener(li))

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inköpslista</title> <style> li.todo { color: black; text-decoration: none; } li.done { color: red; text-decoration: line-through; } </style> </head> <body> <h2>Inköpslista</h2> <div> <input type="text" id="myInput" placeholder="Ange vara..."/> <button onclick="nyttElement()">Lägg till</button> </div> <ul id="myUL"> <li class="todo">Kakor</li> <li class="todo">Bullar</li> <li class="done">Nutella</li> </ul> <script src="lista.js"></script> </body> </html>

Answer 2

您需要將click事件附加到ul元素，並使用event.target關鍵字來檢查clicked元素。

注意：您可能需要防止使用以下方式提交空白字段：

if (item !== "") {
     //Append the 'li'
}

 document.querySelector("#myUL").addEventListener("click", function(e) { if (e.target.tagName === 'LI') { e.target.style.textDecoration = "line-through"; e.target.style.color = "red"; } }); function nyttElement() { var item = document.getElementById("myInput").value; if (item !== "") { var newItem = document.createElement("li"); var text = document.createTextNode(item); newItem.appendChild(text); document.getElementById("myUL").appendChild(newItem); } else { console.log('Some message in the else clause about filling the empty field.') } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inköpslista</title> </head> <body> <h2>Inköpslista</h2> <div> <input type="text" id="myInput" placeholder="Ange vara..." /> <button onclick="nyttElement()">Lägg till</button> </div> <ul id="myUL"> <li>Kakor</li> <li>Bullar</li> <li style="text-decoration: line-through;">Nutella</li> </ul> <script src="lista.js"></script> </body> </html>

Answer 3

您不需要遍歷所有li。 要突出顯示單擊的li，您必須使用以下事件委托

 function nyttElement() { var newItem = document.createElement("li"); var item = document.getElementById("myInput").value; var text = document.createTextNode(item); newItem.appendChild(text); document.getElementById("myUL").appendChild(newItem); } document.getElementById("myUL").addEventListener("click", function(e) { // if target is li if (e.target && e.target.nodeName === 'LI') { // toggle done class e.target.classList.toggle('done'); } });

 .done { text-decoration: line-through; color: red; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inköpslista</title> </head> <body> <h2>Inköpslista</h2> <div> <input type="text" id="myInput" placeholder="Ange vara..." /> <button onclick="nyttElement()">Lägg till</button> </div> <ul id="myUL"> <li>Kakor</li> <li>Bullar</li> <li>Nutella</li> </ul> <!--<script src="lista.js"></script>--> </body> </html>

僅更改一種樣式 <li> 單擊元素

問題描述

3 個解決方案

解決方案1
0 2018-10-09 13:28:24

解決方案2
0 已采納 2018-10-09 13:28:29

解決方案3
0 2018-10-09 13:41:24

僅更改一種樣式 <li> 單擊元素

問題描述

3 個解決方案

解決方案1 0 2018-10-09 13:28:24

解決方案2 0 已采納 2018-10-09 13:28:29

解決方案3 0 2018-10-09 13:41:24

解決方案1
0 2018-10-09 13:28:24

解決方案2
0 已采納 2018-10-09 13:28:29

解決方案3
0 2018-10-09 13:41:24