C# 无法对foreach循环中的每个数据集应用不同的CSS类

您好，我们正在寻找对每个数据集应用不同的CSS类，这些数据集是由foreach循环数据生成的

下面是我们尝试过的，但是运气不好，你能通过我的代码更正一下吗

            <ul class="imagehover-maindiv">
            <li class="hovermaindiv">

                @foreach (var a in Model.publicShowModelProfileForUI)
                {

                    for (int i = 1; i <= 4; i++)
                    {
                        if (i == 1)
                        {
                        <div class="hoverchilddiv bg-img1">
                            <img class="" src="~/Files/ProfilePics/@a.profilepic" width="80" height="80" />
                        </div>
                        <div class="overlay-text">
                            <h6 class="overlay-text-clr">@a.profilename</h6>
                        </div>
                        }

                    if (i == 2)
                        {
                            <div class="hoverchilddiv bg-img2">
                                <img class="" src="~/Files/ProfilePics/@a.profilepic" width="80" height="80" />
                            </div>
                            <div class="overlay-text">
                                <h6 class="overlay-text-clr">@a.profilename</h6>
                            </div>
                        }
                        if (i == 3)
                        {
                            <div class="hoverchilddiv bg-img3">
                                <img class="" src="~/Files/ProfilePics/@a.profilepic" width="80" height="80" />
                            </div>
                            <div class="overlay-text">
                                <h6 class="overlay-text-clr">@a.profilename</h6>
                            </div>
                        }
                        if (i == 4)
                        {
                            <div class="hoverchilddiv bg-img4">
                                <img class="" src="~/Files/ProfilePics/@a.profilepic" width="80" height="80" />
                            </div>
                            <div class="overlay-text">
                                <h6 class="overlay-text-clr">@a.profilename</h6>
                            </div>
                        }                          


                }


                }

            </li>
        </ul>

}

}

}

}

我会使用计数器：

@{
int counter=1；@*设置计数器*@
foreach（Model.publicShowModelProfileForUI中的变量a）
{
@*使用你上课的柜台*@
@a、 档案名称
计数器+++；@*递增计数器*@
}
}

I可能是盲的，但您的类在循环期间看起来完全相同，没有任何更改。您已经有了索引计数器

I

。将其附加到类名并删除其余的

if

语句shi Gezzasa，我们已经用不同的CSS类更新了代码。你能再检查一下吗？你说它不工作是什么意思。你也可以添加你的CSS吗？可以用循环中的

i

索引计数器替换的数字。在我看来，您当前的循环有点多余。所以，问题可能在于您的样式。你想要实现什么？最终产品应该是什么样的？@Adarsh您是否考虑过用利润代替利润来定位？我想你会发现这是一种更好的定位方式。使用for循环不是更好吗？那么你就不需要额外的var了。不，因为你只是将var放入for循环中，然后你必须进行额外的计算，比如

i+1

，因为循环将基于索引为0，然后你必须使用

a[i]

访问每个项目，这与使用实际对象维护相比没有那么好

.bg-img1 {
height: 80px;
width: 80px;
z-index: 99;
margin-left: -129px;

.bg-img1:hover {
    transform: scale(1.7);
    z-index: 99999;
}


.bg-img2 {
margin-left: -79px;
margin-top: 49px;
z-index: 99;

.bg-img2:hover {
    transform: scale(1.7);
}

.bg-img3 {
margin-left: -186px;
margin-top: 55px;
z-index: 99;

 .bg-img3:hover {
    transform: scale(1.7);
}

.bg-img4 {
margin-left: -134px;
margin-top: 107px;
z-index: 99;

.bg-img4:hover {
    transform: scale(1.7);
}