在数字网格上选择的数字

Question

我正在尝试使用 HTML / CSS / JS 制作数字网格。 我想添加一些功能，如果我在输入时输入一个数字，所选数字将在网格上突出显示。 我怎样才能做到这一点？

我的示例网格代码：参考（ https://stackoverflow.com/a/57550587/10427949 ）

 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++) { let cell = document.createElement("div"); cell.innerText = (c + 1); container.appendChild(cell).className = "grid-item"; }; }; makeRows(5, 5);

 :root { --grid-cols: 1; --grid-rows: 1; } #container { display: grid; grid-gap: 1em; grid-template-rows: repeat(var(--grid-rows), 1fr); grid-template-columns: repeat(var(--grid-cols), 1fr); }.grid-item { padding: 1em; border: 1px solid #ddd; text-align: center; }

 <input type="number" style="font-size:40px;margin-bottom:50px;width:80px;" min="1" max="25" > <div id="container"> </div>

Answer 1

这是一个例子。

 const container = document.getElementById("container"); const find = document.getElementById('find'); function makeRows(rows, cols) { container.style.setProperty('--grid-rows', rows); container.style.setProperty('--grid-cols', cols); for (let i = 0; i < (rows * cols); i++) { let cell = document.createElement("div"); cell.id = "x"+i; cell.innerText = (i + 1); container.appendChild(cell).className = "grid-item"; }; }; makeRows(5, 5); const selectVal = function() { [...container.querySelectorAll('.grid-item')] // all already selected.forEach(cell => cell.classList.remove('selected')); // reset the highlight const val = find.value; const cell = document.getElementById('x'+(val-1)); // your find starts at 1 if (cell) cell.classList.add('selected'); // if found, add a class }; find.addEventListener('input',selectVal); container.addEventListener('click',function(e) { const tgt = e.target.closest('.grid-item'); // make sure to handle child elements if (tgt) { // we must have clicked on or in the cell find.value = +tgt.id.replace("x","")+1; selectVal(); } })

 :root { --grid-cols: 1; --grid-rows: 1; } #container { display: grid; grid-gap: 1em; grid-template-rows: repeat(var(--grid-rows), 1fr); grid-template-columns: repeat(var(--grid-cols), 1fr); }.grid-item { padding: 1em; border: 1px solid #ddd; text-align: center; }.selected { background-color: yellow; }

 <input type="number" id="find" style="font-size:40px;margin-bottom:50px;width:80px;" min="1" max="25" > <div id="container"> </div>

更新

 const container = document.getElementById("container"); const findDiv = document.getElementById('findDiv'); const gridSize = 5; function makeRows(rows, cols) { container.style.setProperty('--grid-rows', rows); container.style.setProperty('--grid-cols', cols); const max = gridSize * gridSize; for (let i = 0; i < (rows * cols); i++) { let cell = document.createElement("div"); cell.id = "x" + i; cell.innerText = (i + 1); cell.classList.add("grid-item"); container.appendChild(cell); }; for (let i = 0; i < gridSize; i++) { let input = document.createElement("input"); input.type = "number"; input.min = 1; input.max = max; input.classList.add("find"); findDiv.appendChild(input); } }; makeRows(gridSize, gridSize); const inputs = findDiv.querySelectorAll("input"); const sels = new Array(gridSize); const selectVal = function(e, inp) { const allSelected = [...container.querySelectorAll('.grid-item.selected')] if (allSelected.length === gridSize) { console.log(gridSize, " already selected") return; } const tgt = inp || e.target; const index = Array.from(tgt.parentNode.children).indexOf(tgt) const val = +tgt.value; sels.filter(sel => sel).forEach(sel => { const cell = document.getElementById(sel); if (cell) cell.classList.remove('selected') }) if (val < tgt.min || val > tgt.max) sels[index] = ""; else sels[index] = 'x' + (tgt.value - 1); sels.filter(sel => sel).forEach(sel => { const cell = document.getElementById(sel); if (cell) cell.classList.add('selected') }) }; findDiv.addEventListener('input', selectVal); container.addEventListener('click', function(e) { const tgt = e.target.closest('.grid-item'); // make sure to handle child elements if (tgt) { // we must have clicked on or in the cell const cellId = tgt.id if (sels.find(sel => sel === cellId)) return; // we clicked on existing thing. We could TOGGLE here const free = sels.findIndex(sel =>.sel) if (free.=-1) { inputs[free].value = +tgt,id.replace("x"; "") sels[free] = tgt.id. tgt;classList.add("selected"); } } })

 :root { --grid-cols: 1; --grid-rows: 1; } #container { display: grid; grid-gap: 1em; grid-template-rows: repeat(var(--grid-rows), 1fr); grid-template-columns: repeat(var(--grid-cols), 1fr); }.grid-item { padding: 1em; border: 1px solid #ddd; text-align: center; }.find { font-size: 40px; margin-bottom: 50px; width: 80px; }.selected { background-color: yellow; }

 <div id="findDiv"></div> <div id="container"></div>