Question

我有一个PHP关联数组列表。列表中的每个关联数组都是一种颜色。它有十六进制代码，标签和系列。该系列将是基本颜色：蓝色，红色，绿色等，并且标签将是更具体的颜色，例如，对于蓝色家庭，可能有：浅绿色海洋，蓝绿色，天蓝色。

在我的模板中，我遍历关联数组列表，创建一个基本的两部分容器，上半部分只是十六进制颜色，下半部分用十六进制代码和标签名称描述它。我希望每件物品都放在一个大容器中，无论它是什么样的家庭。例如，aqua marine，teal和sky blue将放入一个带有标题“blue”的容器中，并且在容器中可能还有石灰，森林和黄绿色，标题为“绿色”。我提前按家庭字段排序关联数组列表，所以我真正需要知道的是当家庭价值发生变化时如何告诉我的html创建一个新的“家庭容器”。

我是一名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 个答案: