如何以编程方式确定方格图案中的方格状态？

Question

所以，我有一个 2xN 组件网格，其中 N 是产品数量。产品的背景颜色应以方格图案布置，如下所示：

每个组件都可以访问自己的网格顺序（索引），因此，从逻辑上讲，我们需要定位（白色）：

2,3,6,7,10,11

以此类推

我们如何在数学上做到这一点？

Answer 1

这将在 CSS 和

中完成

.grid .product{background:black}
.grid .product:nth-child(4n+2),
.grid .product:nth-child(4n+3){background:white}

在编程方面，您可以通过测试元素对 4 的模数是 2 还是 3 来测试 4n+2 或 4n+3。

所以假设 n 是要测试的元素的索引

var mod = n % 4;
if (mod === 2 || mod === 3) {
    // handle white
} else {
    // handle black
}

完整示例 (HTML/CSS)

.grid{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid black;
  flex-wrap:wrap;
}

.grid .product {
  color:white;
  background: black;
  width:50%;
  padding:2em;
  text-align:center;
  box-sizing:border-box;
}

.grid .product:nth-child(4n+2),
.grid .product:nth-child(4n+3) {
  color:black;
  background: white;
}

<ul class="grid">
  <li class="product">1</li>
  <li class="product">2</li>
  <li class="product">3</li>
  <li class="product">4</li>
  <li class="product">5</li>
  <li class="product">6</li>
  <li class="product">7</li>
  <li class="product">8</li>
</ul>

如何以编程方式确定方格图案中的方格状态？

How to programmatically determine checkered status in checkered pattern?

javascript

css

algorithm

formula