dongnei3634 2017-10-23 04:04
浏览 41
已采纳

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

I have a list of PHP associative arrays. 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, e.g. 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.

I'm a Python developer, and am new to all things 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>

enter image description here

  • 写回答

1条回答 默认 最新

  • doushi5752 2017-10-23 04:29
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么
  • ¥15 网站显示不安全连接问题
  • ¥15 51单片机显示器问题
  • ¥20 关于#qt#的问题：Qt代码的移植问题
  • ¥50 求图像处理的matlab方案