通过PHP关联数组键分隔HTML容器

Question

I have a list of PHP associative arrays. 我有一个PHP关联数组的列表。 Each associative array in the list is a color. 列表中的每个关联数组都是一种颜色。 It has a hex code, a label, and a family. 它具有一个十六进制代码，一个标签和一个家族。 The family will be basic colors: blue, red, green, etc., and the labels will be more specific colors, eg for the blue family there could be: aqua marine, teal, sky blue. 该系列将使用基本颜色：蓝色，红色，绿色等，并且标签将使用更特定的颜色，例如，对于蓝色系列，可能是：海洋蓝，蓝绿色，天蓝色。

In my template, I iterate over the list of associative arrays, creating a basic two part container, the top half just being the hex color, and the bottom half describing it with its hex code, and label name. 在我的模板中，我遍历关联数组的列表，创建一个基本的两部分容器，上半部分只是十六进制颜色，下半部分用十六进制代码和标签名称对其进行了描述。 I want each item to be in one large container for whatever family it is. 我希望每个物品都可以装在一个大容器中，以容纳任何家庭。 For example aqua marine, teal, and sky blue would go in one container with a header 'blue', and there might also be lime, forest, and yellow-green in a container with a header 'green'. 例如，水生海洋色，蓝绿色和天蓝色将放入标有“蓝色”的一个容器中，并且标有“绿色”的容器中可能还包含石灰，森林和黄绿色。 I order the list of associative arrays by the family field ahead of time so what I really just need to find out is how to tell my html to create a new 'family container' when the value of family changes. 我提前按family字段排序了关联数组的列表，所以我真正需要了解的是，当family的值更改时，如何告诉我的html创建一个新的“ family container”。

I'm a Python developer, and am new to all things PHP. 我是Python开发人员，并且是PHP的新手。

PHP HTML 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

You can group your colours by family and you will have readable view like below 您可以按家庭将颜色分组，您将看到如下所示的可读视图

<?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