使用javascript或php将相同的类添加到动态创建的元素中

Question

Hello!

So for each category in an online shop i have a page with every subcategory included and a table with products. I have this table with sorting buttons on top for each subcategory of products. What I want is to put the same color as the buttons to each row(product) in the table. So where the product is from the Display subcategory the color should be green and so on.

This needs to be done dynamically because I have more pages like that, created from the database. Another page

To add the subcategory colors I'm using a simple

$class++

in the while loop. with css classes created like

.col1{
   color: #3e8f3e;
}
.col2{
   color: #e38d13;
}
.col3{
   color: #b92c28;
}
.col4{
   color: #DC4C46;
}
.col5{
   color: #672E3B;
}
.col6{
   color: #F3D6E4;
}
.col7{
   color: #C48F65;
}
.col8{
   color: #223A5E;
}
.col9{
   color: #898E8C;
}
.col10{
   color: #005960;
}
.col11{
   color: #9C9A40;
}
.col12{
   color: #4F84C4;
}

I used the subcatergory name as the id of the button. Code for button:

<li>
    <a type="button" class="btn-filter" id="'.$row['subcat_pro'].'" href="#go" title="'.$row['subcat_pro'].'" data-target="'.$row['subcat_pro'].'">'.$row['subcat_pro'].'</a><hr class="btn'.$class++.'">
</li>';

Code for the <span> where the color should be:

<span id="sub'.$row['subcat_pro'] .'" class="pull-right">('. $row['subcat_pro'] .') (SKU: '. $row['sku'] .')</span>

I really have no idea of what can be done.

Thanks in advance for any help!

Answer 1

honestly, i would put that color IN your "categories" or "subcategories" table, like, i would create a colunm called "color" and then when you are creating your table you could do something like this:

<?php 
    $categories = $db ... // get your categories here using a query

    foreach($categories as $category) {
          <span name="category_{$category['id']}" style="color:{$category['color']}" ><span>
    }
?>

But, if you don't like styles in-line on your HTML, like i don't, you will have to define all those colors as classes on your CSS file, then, you would build that html using those classes.

Let me know if you want a example for the second option (which is pretty hard work).