Question

我有一个5x5的网格，每当您单击它时，每个框都可以变成黑色或白色。该网格模拟了灯光熄灭游戏，到目前为止，我只能更改我单击的盒子的颜色，但我还需要更改水平和垂直长度为1的盒子的颜色。

我有一种感觉，我需要使用javascript将网格划分成一个数组，但是我不知道该怎么做。到目前为止，下面的代码是我的。

return <span><b>{Number(value).toFixed(2)}</b>%</span>;

var grid = document.getElementsByClassName("box");

Array.from(grid).forEach(click => click.addEventListener("click", function changeColor() {
    if (click.style.background === 'black') {
        click.style.background = "white";
    } else {
        click.style.background = "black";
    }
}));

body {
  background-color: lightblue;
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-gap: 3px;
}

.box {
  background-color: #fff;
  padding: 50px;
}

Answer 1

由于点击操作会通过调用changeColor影响多个框，因此最好将其与事件监听器分开

const changeColor = function(box){
    if (box.style.background === 'black') {
        box.style.background = "white";
    } else {
        box.style.background = "black";
    }
}

您仍然需要分配一个事件处理程序，我们将非常有创意地调用clickHandler

Array.from(grid).forEach(box => click.addEventListener("click", () => clickHandler(box)))

区分每个框将很有用；可以通过在每个属性中添加一个id属性，同时分配侦听器，使上面的行变为

Array.from(grid).forEach(
    (box, index) => {
        box.addEventListener("click", () => clickHandler(box))
        box.id = index
    }
)

最后，您需要确定单击一个框时需要更改哪个框。可以在clickHandler函数中定义

let boxes = Array.from(grid)

const clickHandler= function(box){
    // get the box id, which will coincide with its position in the array
    index = parseInt(c.id)

    // determine the adjacent boxes' indexes
    up = index - 5
    down = index + 5
    left = index - 1
    right = index + 1

    // Make sure the index is not out of bounds and change color
    if(up > 0)
        changeColor(boxes[up])
    if(down < 25)
        changeColor(boxes[down])

    // Make sure the left and right indexes are in the same row
    if(Math.floor(index / 5) == Math.floor(left / 5))
        changeColor(boxes[left])
    if(Math.floor(index / 5) == Math.floor(right / 5))
        changeColor(boxes[right])

    // change the color of the box that was clicked
    changeColor(boxes[index])
}

所有内容放在一起应该是这样的：

const grid = document.getElementsByClassName('box')
const changeColor = function(box){
    if (box.style.background === 'black') {
        box.style.background = "white";
    } else {
        box.style.background = "black";
    }
}

Array.from(grid).forEach(
    (box, index) => {
        box.addEventListener("click", () => clickHandler(box))
        box.id = index
    }
)

let boxes = Array.from(grid)

const clickHandler= function(box){
    // get the box id, which will coincide with its position in the array
    index = parseInt(box.id)

    // determine the adjacent boxes' indexes
    up = index - 5
    down = index + 5
    left = index - 1
    right = index + 1

    // Make sure the index is not out of bounds and change color
    if(up > 0)
        changeColor(boxes[up])
    if(down < 25)
        changeColor(boxes[down])

    // Make sure the left and right indexes are in the same row
    if(Math.floor(index / 5) == Math.floor(left / 5))
        changeColor(boxes[left])
    if(Math.floor(index / 5) == Math.floor(right / 5))
        changeColor(boxes[right])

    // change the color of the box that was clicked
    changeColor(boxes[index])
}

body {
  background-color: lightblue;
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-gap: 3px;
}

.box {
  background-color: #fff;
  padding: 50px;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Lights Out Game</title>
		<link href="lights_out.css" rel="stylesheet" type="text/css">
		<script type="module" src="Lightsout.js?v=5"></script>
	</head>
	
	<body>
		<h1>Lights Out</h1>
		<button type="button">Reset board</button>
		<div class="wrapper">
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		  <div class="box"></div>
		</div>

		<article> Click on each box until all the boxes are black.</article>
	</body>

如何更改我在网格中单击的框旁边的框的颜色

1 个答案: