Question

我在MVC框架（Codeigniter）中创建了div。从数据数组中，我循环遍历'subject'数组并为每个数组创建一个div。我还为每个主题添加了一个标题div和一个内容div。那么，如何使每个主题中的标题背景与颜色数组具有不同的颜色。除非主题数量大于颜色数组中的颜色数量，否则它们必须不同。

以下是循环每个主题的代码：

foreach ($userSubjects as $subject => $info) {
                echo "<div class='subject paper'>";
                    echo "<div class='subjectHeader'>";
                        echo $info['subject_name'];
                    echo "</div>";
                    echo "<div class='subjectContent'>";
                    echo "</div>";
                echo "</div>";

这是randColor数组：

$colorSet = array(
    '#1abc9c',
    '#2ecc71',
    '#3498db',
    '#9b59b6',
    '#34495e',
    '#f1c40f',
    '#e67e22',
    '#e74c3c',
    '#ecf0f1',
    '#95a5a6'
);

Answer 1

我认为最好的技巧是使用CSS而不是PHP：

div.subject:nth-child(10n+1) > .subjectHeader { background: #1abc9c}
div.subject:nth-child(10n+2) > .subjectHeader { background: #2ecc71}
div.subject:nth-child(10n+3) > .subjectHeader { background: #3498db}
div.subject:nth-child(10n+4) > .subjectHeader { background: #9b59b6}
div.subject:nth-child(10n+5) > .subjectHeader { background: #34495e}
div.subject:nth-child(10n+6) > .subjectHeader { background: #f1c40f}
div.subject:nth-child(10n+7) > .subjectHeader { background: #e67e22}
div.subject:nth-child(10n+8) > .subjectHeader { background: #e74c3c}
div.subject:nth-child(10n+9) > .subjectHeader { background: #ecf0f1}
div.subject:nth-child(10n+10) > .subjectHeader { background: #95a5a6}

为了便于使用，您可以使用此脚本生成CSS脚本;

<style type="text/css">
<?php
    $i = 1;
    foreach($colorSet as $c)
    {
         echo "div.subject:nth-child(".count($colorSet)."n+".$i.") > .subjectHeader { background: ".$c."}";
         $i++
    }
?>
</style>

Answer 2

最好的方法（IMO）是使用CSS类来表示颜色。首先定义CSS样式：

<style type="text/css">
<?php
foreach($colorSet as $key => $color) {
    echo '.color' . $key . ' .subjectHeader { color: "' . $color . '"; }' . PHP_EOL;
}
?>
</style>

然后当你输出你的div时，用它输出一种颜色样式：

$i = 0;
foreach ($userSubjects as $subject => $info) :
    if(!isset($colorSet[$i]))
        $i = 0; // reset to the start of the array if you reach the end
    ?>
    <div class='subject paper color<?=$colorSet[$i++]?>'>
        <div class='subjectHeader'>
            <?=$info['subject_name']?>
        </div>
        <div class='subjectContent'>
        </div>
    </div>
    <?php
endif;

Answer 3

你可以只有一个计数器变量并将css添加为样式属性。保存您必须为css规则创建样式标记。

<?php
    $colourSet = array(
        '#1abc9c',
        '#2ecc71',
        '#3498db',
        '#9b59b6',
        '#34495e',
        '#f1c40f',
        '#e67e22',
        '#e74c3c',
        '#ecf0f1',
        '#95a5a6'
    );
    $numColours = count($colourSet);

    $colourInd = 0;

    foreach ($userSubjects as $subject => $info) {
?>
<div class="subject paper">
    <div class="subjectHeader" style="background: <?php echo $colourSet[$colourInd]; ?>">
        <?php echo $info['subject_name']; ?>
    </div>
    <div class="subjectContent">
    </div>
</div>
<?php
        $colourInd = ($colourInd + 1) % $numColours;
    }
?>

因为它没有使用nth-child，所以它向后兼容旧浏览器。但考虑到它只是比IE8更老，并不支持，不值得担心。

除非您计划动态加载这些颜色，否则最好将它们定义为像@ Aldry-Wijaya建议的css规则

以编程方式从php数组创建具有不同背景颜色的div

3 个答案: