通過PHP關聯數組鍵分隔HTML容器

Question

我有一個PHP關聯數組的列表。 列表中的每個關聯數組都是一種顏色。 它具有一個十六進制代碼，一個標簽和一個家族。 該系列將使用基本顏色：藍色，紅色，綠色等，並且標簽將使用更特定的顏色，例如，對於藍色系列，可能是：海洋藍，藍綠色，天藍色。

在我的模板中，我遍歷關聯數組的列表，創建一個基本的兩部分容器，上半部分只是十六進制顏色，下半部分用十六進制代碼和標簽名稱對其進行了描述。 我希望每個物品都可以裝在一個大容器中，以容納任何家庭。 例如，水生海洋色，藍綠色和天藍色將放入標有“藍色”的一個容器中，並且標有“綠色”的容器中可能還包含石灰，森林和黃綠色。 我提前按family字段排序了關聯數組的列表，所以我真正需要了解的是，當family的值更改時，如何告訴我的html創建一個新的“ family container”。

我是Python開發人員，並且是PHP的新手。

PHP HTML

<?php

$allColors = array(
  '0' => array(
  "id"=> "1",
  "family"=> "blue",
  "name"=> "ariel blue",
  "hex"=> "#339FFF"),

 '3' => array(
  "id"=> "3",
  "family"=> "green",
  "name"=> "forest",
  "hex"=> "#FAFF33"),

 '1' => array(
  "id"=> "2",
  "family"=> "blue",
  "name"=> "aqua marine",
  "hex"=> "#339FFF"),

 '4' => array(
  "id"=> "4",
  "family"=> "green",
  "name"=> "lime",
  "hex"=> "#FAFF33"),

 '2' => array(
  "id"=> "5",
  "family"=> "blue",
  "name"=> "teal",
  "hex"=> "#339FFF"),

 '5' => array(
  "id"=> "6",
  "family"=> "green",
  "name"=> "yellow-green",
  "hex"=> "#FAFF33")
); 

array_multisort( array_column( $allColors, 'family') , SORT_DESC, $allColors );

$key_list = ["blue", "green"]

?> 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="main.css">
  </head>

 <body>

 <?php 
  $currFamily = $allColors[0]["family"]
 ?>

  <?php foreach($allColors as $key => $value): ?>

    if ($value["family"] != $currFamily) {
      <div id="family-container" style="border: 1px solid <?php echo $value["family"]; ?>; background-color: $currFamily;">
    }

      <h2>Blue <?php echo $currFamily; ?></h2>

       <div class="child-container" style="margin-right: 20px; width: 100px; height: 150px; border: 1px solid black; float: left;">
          <div style="width: 100%; height: 100px; float: right; border-bottom: 1px solid black; background: <?php echo $value["hex"]; ?>;"></div>
          <div style="width: 100%; height: 50px; float: right;">
            <?php echo $value["name"]; ?>;
            <?php echo $value["hex"]; ?>;
          </div>
        </div>

        if ($value["family"] != $currFamily) {
          </div>

          $currFamily = $value["family"]
        }

  <?php endforeach; ?>

 </body>
</html>

Answer 1

您可以按家庭將顏色分組，您將看到如下所示的可讀視圖

<?php

$allColors = []; 
$arGroupedByFamily = [];
foreach ($allColors as $color) {
    $arGroupedByFamily[$color['family']][] = $color;
}

?> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>

    <body>
        <?php foreach ($arGroupedByFamily as $key => $family): ?>
            <div id="family-container" style="border: 1px solid <?php echo $key; ?>; background-color: $currFamily;">
                <?php foreach ($family as $color): ?>
                    <h2><?php echo $color['name'];?> <?php echo $key; ?></h2>
                    <div class="child-container" style="margin-right: 20px; width: 100px; height: 150px; border: 1px solid black; float: left;">
                        <div style="width: 100%; height: 100px; float: right; border-bottom: 1px solid black; background: <?php echo $color["hex"]; ?>;"></div>
                        <div style="width: 100%; height: 50px; float: right;">
                            <?php echo $color["name"]; ?>;
                            <?php echo $color["hex"]; ?>;
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endforeach; ?>
    </body>
</html>

通過PHP關聯數組鍵分隔HTML容器

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-23 04:29:11

通過PHP關聯數組鍵分隔HTML容器

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-23 04:29:11

解決方案1
1 已采納 2017-10-23 04:29:11