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

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>