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

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


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

2,3,6,7,10,11

等等。

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

最佳答案

这将在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>

关于javascript - 如何以编程方式确定方格图案中的方格状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46714429/