如何使用PHP动态修改循环输出的card div卡片背景色（无需JavaScript）

实现方案 #

你可以通过循环索引取模的方式调用预设的背景色类，完全用PHP实现循环切换卡片背景色，修改后的代码如下：

<div class="row gutter-xs">
     <?php
     // 预先定义要使用的背景色类数组，可根据需要增减调整
     $bgClasses = ['bg-primary', 'bg-success', 'bg-warning', 'bg-danger', 'bg-info', 'bg-dark'];
     $bgCount = count($bgClasses);
     // 给foreach加上索引$k
     foreach($dispcnt as $k => $object)
     {
        // 索引对颜色数组长度取模，实现循环取用不同背景色
        $currentBg = $bgClasses[$k % $bgCount];
        ?><div  class="col-xs-3 col-md-3">
        <!-- 把固定的bg-info替换为动态的$currentBg -->
        <div class="card <?php echo $currentBg;?>">
            <div class="card-values">
                <div class="p-x">
                    <small><?php echo $object->qa;?> </small>
                    <h3 class="card-title-l"><?php echo  $object->cnt;?> Counts</h3>
                </div>
            </div>
            </div>
     </div>
     <?php }?>
     </div>

说明 #

• 你可以根据自己的样式需求调整$bgClasses数组里的类名，加入自定义的背景色类也可以
• 取模运算会自动循环使用数组里的颜色，不管你有多少张卡片都能自动分配不同背景色
• 如果需要固定某个分类对应固定颜色，也可以根据$object->qa字段的值来匹配对应的颜色类，无需用索引切换

内容的提问来源于stack exchange，提问作者Shadywolf21