我在 uni 有一个任务，只用 HTML 和 javascript 做一个杂货 list 。当我点击 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";
}
}
});
如有任何帮助，我们将不胜感激!
最佳答案
您需要将点击事件附加到 ul 元素，并使用 event.target 关键字检查点击的元素。
注意:您可能需要使用以下方法来防止提交空字段:
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>关于javascript - 单击时仅更改一个 <li> 元素的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52722164/