javascript - 我的嵌套函数没有按我的意愿运行
问题描述
我的makeRows
功能没有按预期工作,我不确定我是否以正确的方式进行。当我按“全部清除”时,提示运行以创建新的行和列,但mouseOver
该类没有被添加回整个网格,只有底部。
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty("--grid-rows", rows);
container.style.setProperty("--grid-cols", cols);
for (c = 0; c < rows * cols; c++) {
const cell = document.createElement("div");
container.appendChild(cell).className = "grid-item mouseOver";
}
}
window.onload = makeRows(16, 16);
const btn = document.querySelector("button");
const div = container.getElementsByTagName("div");
function reset() {
[].forEach.call(div, function (el) {
el.classList.remove("mouseOver");
});
let num = prompt("How many rows and cols?");
makeRows(num, num);
}
btn.addEventListener("click", reset);
:root {
--grid-cols: 1;
--grid-rows: 1;
}
#container {
display: grid;
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
}
.grid-item {
padding: 1rem;
border: 1px solid #ddd;
text-align: center;
}
.mouseOver {
transition: 0s 10s;
}
.mouseOver:hover {
background-color: aqua;
transition: 0s;
}
#btn {
max-width: 100%;
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Etch-A-Sketch</title>
<link rel="stylesheet" href="etch.css" />
</head>
<header>
<button id="btn">Clear All</button>
</header>
<body>
<div id="container"></div>
</body>
<footer>
<script src="etch-script.js"></script>
</footer>
</html>
解决方案
要删除所有具有类的项目,grid-item
请在重置函数中使用此迭代:
function reset() {
document.querySelectorAll('.grid-item').forEach(e => e.parentNode.removeChild(e));
let num = prompt("How many rows and cols?");
makeRows(num, num);
}
这将选择所有具有类 grid-item 的元素,并为每个找到的 div 选择其父节点并将其自身从中删除。
推荐阅读
- c# - 这些 foreach 循环可以合并为一个吗?
- assembly - 将 AH 存储到 DW 变量中时“操作数类型不匹配”
- nginx - 如何将 auth_request 发送到 nginx 中的变量 URI?
- asp.net - 将 asp.net 核心应用程序发布到 azure 时出错
- php - 如何使用孩子创建 json 数组 php
- cloud - activiti-7 setup *** 没有规则来制作目标 `activiti-cloud-audit'
- angular - Angular 可观察到的错误不会使用 ChangeDetectionStrategy.OnPush 刷新界面
- python - 如何将 utf-8 编码转换为字符串?
- regex - 使用正则表达式选择数据并清理它以输出
- typescript - 如何从数组中获得类似枚举的行为?打字稿