如何使用php while循環為div提供不同的顏色？

Question

<div class="vc_row wpb_row vc_inner vc_row-fluid">
    <?php
        $facilitiessql="select * from ".TABLE_ADM_FACILITIES;
        $facilitiesrun=mysql_query($facilitiessql);
        while($facilitiesfetch=mysql_fetch_array($facilitiesrun))
        {
    ?>
    <div class="wpb_column vc_column_container vc_col-sm-3">
      <div class="vc_column-inner vc_custom_1458192848305">
            <div class="wpb_wrapper">
              <div class='dt-sc-icon-box type10'>
                <div class="icon-wrapper">  
                    <img width="215" height="215" src="upload/facilities/<?php echo $facilitiesfetch['bimg'];?>" class="attachment-full" alt="service-image-1" sizes="(max-width: 215px) 100vw, 215px"/>
                </div>
                <div class="icon-content">
                    <h4><?php echo $facilitiesfetch['title']; ?></h4>
                    <?php echo $facilitiesfetch['content']; ?>
                </div>
              </div>
            </div>
       </div>
     </div>
    <?php } ?>
</div>

如何使用while循環為這些div提供不同的顏色，它們具有相同的類。

Answer 1

如果要給每個div不同的顏色，以下解決方案可能會幫助您。

<div class="vc_row wpb_row vc_inner vc_row-fluid">
<?php

    $arrColorCode = array('#7FFFD4','#F0FFFF','#F5F5DC','#F5F5DC','#A52A2A', '#DEB887');

    $facilitiessql="select * from ".TABLE_ADM_FACILITIES;
    $facilitiesrun=mysql_query($facilitiessql);
    while($facilitiesfetch=mysql_fetch_array($facilitiesrun))
    {
      $i = 0;
      $styleCode = '';
      if(isset($arrColorCode[$i]))
        $styleCode = "style='background-color:$arrColorCode[$i]'";
      ?>
      <div class="wpb_column vc_column_container vc_col-sm-3" <?php echo $styleCode; ?>>
        <?php 
          $i++;
          if(isset($arrColorCode[$i]))
            $styleCode = "style='background-color:$arrColorCode[$i]'";
        ?>
        <div class="vc_column-inner vc_custom_1458192848305" <?php echo $styleCode; ?>>
              <?php 
                $i++;
                if(isset($arrColorCode[$i]))
                  $styleCode = "style='background-color:$arrColorCode[$i]'";
              ?>
              <div class="wpb_wrapper" <?php echo $styleCode; ?>>
                <?php 
                  $i++;
                  if(isset($arrColorCode[$i]))
                    $styleCode = "style='background-color:$arrColorCode[$i]'";
                ?>
                <div class='dt-sc-icon-box type10' <?php echo $styleCode; ?>>
                  <?php 
                    $i++;
                    if(isset($arrColorCode[$i]))
                      $styleCode = "style='background-color:$arrColorCode[$i]'";
                  ?>
                  <div class="icon-wrapper" <?php echo $styleCode; ?>>  
                      <img width="215" height="215" src="upload/facilities/<?php echo $facilitiesfetch['bimg'];?>" class="attachment-full" alt="service-image-1" sizes="(max-width: 215px) 100vw, 215px"/>
                  </div>
                  <?php 
                    $i++;
                    if(isset($arrColorCode[$i]))
                      $styleCode = "style='background-color:$arrColorCode[$i]'";
                  ?>
                  <div class="icon-content" <?php echo $styleCode; ?>>
                      <h4><?php echo $facilitiesfetch['title']; ?></h4>
                      <?php echo $facilitiesfetch['content']; ?>
                  </div>
                </div>
              </div>
         </div>
       </div>
      <?php 
    } 
?>

Answer 2

您可以使用所需顏色創建顏色數組$colors 。 經過while迭代之后，您可以從該數組中獲得一個顏色值並應用於div樣式（在我的示例中，我將其放在color屬性上，但可以將其放在background-color或其他屬性上）。

<div class="vc_row wpb_row vc_inner vc_row-fluid">
    <?php
        // Your php code here
        $colors = array('#112233', '#445566', '#778899');
        $cIndex = 0;
        while($facilitiesfetch=mysql_fetch_array($facilitiesrun))
        {
            $color = $colors[$cIndex++ % count($colors)];
    ?>
    <div class="wpb_column vc_column_container vc_col-sm-3" style="color: <?php echo $color; ?>;">
      <!-- The rest of your html here -->
    </div>
    <?php } ?>
</div>