Find all like attributes in document, and change output based on value - php

Question

I've been working on this list that will provide information from an xml file. The markup I'm working with is as follows:
<?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
}
?>
What I'm trying to accomplish is changing the 'Status'. Regardless of the element, the 'Status' only has two values and will always be either "Red" or "Blue". What I'm trying to do is go through the whole document, find the "Status" attribute, see if the value is "Red", then display an icon or some text, but if it's blue, display nothing. I've come across different examples, but none that show this type of generality. Most of the examples were for locating a specific node and then displaying it's attributes. I'm also trying to avoid, if possible, having to create this rule within each loop, but instead applying it to the whole document (if this seems like the best method.)

Answer 1

Use css selectors instead of javascript. That will make your code lighter and simple!
For example:
<?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;
}
while your css can be:
span.status {
height: 10px;
width: 10px;
}
span.status.red {
background-color: "red";
}
span.status.blue {
background-color: "blue";
}
we are using the concept of multiple css classes

Answer 2

Just change your code slightly to add status as your div class.
Example:
echo "<div class='continent status-{$continent['Status']}'>{$continent['Name']}</div>";
This will output (in case of a red continent named Europe)
<div class='continent status-red'>Europe</div>
then add this CSS to your html:
.status-red {
background-color: red;
}
.status-blue {
background-color: blue;
}
Or somehting along these lines