PHP - Set CSS Class Dynamically in foreach

Question

I'm generating a series of links with an associated colour bar applied by CSS. There are 5 shades that reduce in opacity, starting at 100 and down in increments of 20. So if I had 10 rows it would look like this:

 <a href="link.php"> <span class="linkcolour"></span> <span class="linkText">Heading 100</span> </a> <a href="link.php"> <span class="linkcolour o80"></span> <span class="linkText">Heading 80</span> </a> <a href="link.php"> <span class="linkcolour o60"></span> <span class="linkText">Heading 60</span> </a> <a href="link.php"> <span class="linkcolour o40"></span> <span class="linkText ">Heading 40</span> </a> <a href="link.php"> <span class="linkcolour o20"></span> <span class="linkText">Heading 20</span> </a> <a href="link.php"> <span class="linkcolour"></span> <span class="linkText">Heading 100</span> </a> <a href="link.php"> <span class="linkcolour o80"></span> <span class="linkText">Heading 80</span> </a> <a href="link.php"> <span class="linkcolour o60"></span> <span class="linkText">Heading 60</span> </a> <a href="link.php"> <span class="linkcolour o40"></span> <span class="linkText ">Heading 40</span> </a> <a href="link.php"> <span class="linkcolour o20"></span> <span class="linkText">Heading 20</span> </a>

I'm trying to come up with a way to set the linkcolour class attribute dynamically, so that the first item is set to 'linkcolour', the 2nd item 'linkcolour o80', the 3d 'linkcolour o60' and so on. After 5 items it starts again and repeats as necessary. Here's my foreach loop structure:

<?php
foreach($linkItems as $item) {
    $linkItem = $item->getField('Link');
    $linkColour = '';   
    ?>

    <a href="link.php">
        <span class="<?php echo $linkColour; ?>"></span>
       <span class="linkText"><?php echo $linkItem; ?></span>
     </a>
<?php
} // foreach $linkItems
?>

I can't work out the syntax to set the $linkColour variable so it follows the pattern outlined above?

Answer 1

There are multiple ways you could go about it. For example, you can declare the available CSS classes in an array and loop through them. Modifying your example, you can use something like the following

<?php
$linkColourArray = ["","o80","o60","o40","o20"];
$count = 0;
foreach($linkItems as $item) {
    $linkItem = $item->getField('Link');
    $colourIndex = $count%5;
    $linkColour = $linkColourArray[$colourIndex]; 
    $count++;
    ?>

    <a href="link.php">
        <span class="linkcolour <?php echo $linkColour; ?>"></span>
       <span class="linkText"><?php echo $linkItem; ?></span>
     </a>
<?php
} // foreach $linkItems
?>

Answer 2

I would use the % operator which gives the remainder of a division :

$i = 0;

for ($linkItems as $item) {
        $linkColour = 'linkcolour';
        $mod = $i % 5;
        if ($mod != 0) {
                $linkColour .= ' o'.(100 - (20 * $mod)) ;
        }

        echo $linkColour."\n";
        $i++;
}

For example :

• 3 % 5 -> 3 , because : 3 / 5 = 0 * 5 + 3
• 6 % 5 -> 1 , because : 6 / 5 = 1 * 5 + 1

Then if you have a remainder of 0 you are on an iteration of a multiple of 5, so you do not apply the class.

Else, you can multiple the remainder by 20 and substract that to 100 to have to correct class.

• 1 % 5 = 1 -> class would be 100 - 1 * 20 = 80
• 2 % 5 = 2 -> class would be 100 - 2 * 20 = 60
• ...
• 5 % 5 = 0 -> do not add class

And so on and so forth

Output :

linkcolour
linkcolour o80
linkcolour o60
linkcolour o40
linkcolour o20
linkcolour
linkcolour o80
linkcolour o60
...

Answer 3

Make an array and Just traverse the array to get the values like below

<?php

$arraycolor = array('linkcolour','linkcolour o80','linkcolour o60','linkcolour o40','linkcolour o20');

$link = array('1','2','3','4','5','6','7','8','9','10');

$i=0;
foreach($link as $v)
{

?>
<a href="link.php">
        <span class="<?php echo $arraycolor[$i] ?>"></span>
       <span class="linkText"><?php echo $arraycolor[$i] ?></span>
     </a>
<br/>
<?php
    $i++;
    if($i==count($arraycolor))
    { 
        $i=0;
    }

}
?>

Output :

linkcolour 
linkcolour o80 
linkcolour o60 
linkcolour o40 
linkcolour o20 
linkcolour 
linkcolour o80 
linkcolour o60 
linkcolour o40 
linkcolour o20