在文档中查找所有相似的属性，并根据值更改输出

Question

我一直在处理这个列表，它将提供来自 xml 文件的信息。我正在使用的标记如下：

<?php
    $xml_file = '/path';
    $xml = simplexml_load_file($xml_file);

    foreach($xml->Continent as $continent) {
       echo "<div class='continent'>".$continent['Name']."<span class='status'>".$continent['Status']."</span>";
         foreach($continent->Country as $country) {
           echo "<div class='country'>".$country['Name']."<span class='status'>".$country['Status']."</span>";
              foreach($country->City as $city) {
                 echo "<div class='city'>".$city['Name']."<span class='status'>".$city['Status']."</span></div>";
              }
              echo "</div>"; // close Country div
         }
         echo "</div>"; // close Continent div
    }

?>

我想要完成的是更改“状态”。不管元素是什么，“状态”只有两个值，并且总是“红色”或“蓝色”。我要做的是遍历整个文档，找到“状态”属性，查看值是否为“红色”，然后显示一个图标或一些文本，但如果它是蓝色的，则不显示任何内容。我遇到过不同的例子，但没有一个能表现出这种普遍性。大多数示例用于定位特定节点，然后显示它的属性。如果可能的话，我还试图避免在每个循环中创建此规则，而是将其应用于整个文档（如果这似乎是最好的方法。）

Answer 1

只需稍微更改您的代码即可将状态添加为您的 div 类。

例子：

echo "<div class='continent status-{$continent['Status']}'>{$continent['Name']}</div>";

这将输出（如果是名为欧洲的红色大陆）

<div class='continent status-red'>Europe</div>

然后将此 CSS 添加到您的 html 中：

.status-red {
    background-color: red;
}

.status-blue {
    background-color: blue;
}

或者类似的东西

Answer 2

使用 css 选择器而不是 javascript。这将使您的代码更轻松、更简单！

例如：

<?php
    $xml_file = '/path';
    $xml = simplexml_load_file($xml_file);

    foreach($xml->Continent as $continent) {
       echo "<div class='continent'>".$continent['Name']."<span class='status ". cssForStatus($continent['Status'])."'></span>";
         foreach($continent->Country as $country) {
           echo "<div class='country'>".$country['Name']."<span class='status ". cssForStatus($country['Status'])."'></span>";
              foreach($country->City as $city) {
                 echo "<div class='city'>".$city['Name']."<span class='status ". cssForStatus($city['Status'])."'></span></div>";
              }
              echo "</div>"; // close Country div
         }
         echo "</div>"; // close Continent div
    }

    function cssForStatus($status='')
    {
      switch ($status) {
        case 'red':
          $css = "red";
          break;

        default:
          $css = "blue";
          break;
      }
      return $css;
    }

虽然你的 CSS 可以是：

span.status {
    height: 10px;
    width: 10px;
}

span.status.red {
    background-color: "red";
}

span.status.blue {
    background-color: "blue";
}

我们正在使用多个 css 类的概念