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

Question

你好！

因此，对于在线商店中的每个类别，我都有一个包含每个子类别的页面和一个包含产品的表格。 我有this table，每个产品子类别的顶部都有排序按钮。我想要的是在表格中的每一行（产品）上放置与按钮相同的颜色。 因此，如果产品来自 Display 子类别，颜色应该是绿色等等。

这需要动态完成，因为我有更多这样的页面，是从数据库创建的。 Another page

要添加子类别颜色，我使用的是简单的

$class++

在while循环中。与创建类似的css类

.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;
}

我使用子类别名称作为按钮的 id。 按钮代码：

<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>';

<span> 的代码应该是颜色：

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

我真的不知道可以做什么。

提前感谢您的帮助！

Answer 1

老实说，我会将该颜色放入您的“类别”或“子类别”表中，例如，我会创建一个名为“颜色”的列，然后当您创建表时，您可以执行以下操作：

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

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

但是，如果您不喜欢 HTML 中的内嵌样式，就像我不喜欢的那样，您必须将所有这些颜色定义为 CSS 文件中的类，然后，您将使用这些类构建该 html .

如果您想要第二个选项的示例（这很辛苦），请告诉我。