Comment faire pour déterminer par programme l'état checkered dans le modèle damier?

Question

Donc, j'ai une grille de composants 2xN, où N est le nombre de produits. La couleur de fond des produits devrait être layed dans un motif en damier, comme tel:

Chaque composant a accès à son propre ordre (index) de la grille, donc, en toute logique, nous devons cibler (pour le blanc):

2,3,6,7,10,11

Et ainsi de suite.

Comment pouvons-nous faire cela mathématiquement?

Answer 1

qui serait fait en CSS avec

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

En termes de programmation, vous pouvez tester la 4n + 2 ou 4n + 3 en testant si le modulo de l'élément par 4 est 2 ou 3.

supposant donc n est l'indice de l'élément à tester

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

---

exemple complet (HTML/CS S)

.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>