如何减少本示例中的 JavaScript 代码量？我想要 DRY 代码。
我想知道我需要做什么，以免重复 EventListeners。
请在此处找到代码。首先是 JavaScript，然后是 CSS，然后是 HTML。
var firstLi = document.querySelector("#one");
var secondLi = document.querySelector("#two");
var thirdLi = document.querySelector("#three");
firstLi.addEventListener("click", done);
secondLi.addEventListener("click", done);
thirdLi.addEventListener("click", done);
firstLi.addEventListener("mouseover", hover);
secondLi.addEventListener("mouseover", hover);
thirdLi.addEventListener("mouseover", hover);
firstLi.addEventListener("mouseout", hoverOut);
secondLi.addEventListener("mouseout", hoverOut);
thirdLi.addEventListener("mouseout", hoverOut);
function done() {
this.classList.toggle("greyout");
}
function hover() {
this.classList.add("hover");
}
function hoverOut() {
this.classList.remove("hover");
}.hover {
color: green;
}
.greyout {
color: grey;
text-decoration: line-through;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>to do's</title>
<link rel="stylesheet" href="css/todo.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<ul>
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
</ul>
<script src="todo.js" charset="utf-8"></script>
</body>
</html>最佳答案
Loops和 functions是将相同操作应用于多个值的常用方法。
将元素放在一个数组中并对其进行迭代:
var elements = [firstLi, /*...*/];
elements.forEach(function(element) {
element.addEventListener(/*...*/);
// ...
});
但是正如评论中提到的，悬停效果可以在没有任何 JavaScript 的情况下实现，使用 :hover CSS 选择器:
li:hover {
color: green;
}
关于javascript - 少量的 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35974559/