如何更改循环创建的每个 div 的背景颜色？

Question

我有一个创建 div 的循环。我有 4 种颜色，我想在不使用 javascript 的情况下作为每个 div 的背景颜色。有人知道怎么做吗？

@foreach (var names in Model.Projects.Value) {
    <div class="col-xs-4" style="margin-bottom:20px;">
        <div class="Projects">
            @names.Name
        </div>
    </div>
}

谢谢

Answer 1

您应该为您正在使用的底层框架/库添加标签。动态分配属性值因一个 mvc 框架而异。

现在，从您共享的代码来看，我假设 Model.Projects.Value 是一个包含多个对象的数组/类似数组的结构。每个对象都有一些属性，例如“名称”，我看到您使用@name.Name 访问它。

我建议采用这种方法。在您的 CSS 样式表中定义几个类，如下所示，

.class_name1 {
  background-color: yellow;
}

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

并为Model.Projects.Value 中的每个对象定义另一个名为class 的属性。从您定义的一个类中为这个“类”属性赋值，比如class_name1。

在您的 html 代码中，动态分配类，如下所示：

@foreach (var names in Model.Projects.Value) {
    <div class="col-xs-4 @names.class">
        <div class="Projects">
            @names.Name
        </div>
    </div>
}

您可能需要弄清楚将对象属性与属性 (class="col-xs-4 @names.class") 绑定的语法是否与我上面显示的不同。