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

使用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类的概念

Answer 2

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

示例：

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

这将输出（如果是一个名为Europe的红色大陆）

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

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

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

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

或者沿着这些方向行事

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

2 个答案: