无法将不同的 CSS 类应用于 foreach 循环中的每个数据集答案

【问题标题】：Unable to apply different CSS classes to each data set in a foreach loop无法将不同的 CSS 类应用于 foreach 循环中的每个数据集
【发布时间】：2018-05-30 20:34:54
【问题描述】：

您好，我们正在为每个数据集应用不同的 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>

在上面的代码中，我们使用了一个 for 循环来为每个数据集赋予唯一的 css，但我们得到了预期的结果。

以下是上述 html 代码的 CSS 类

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

【问题讨论】：

我可能是盲人，但您的课程看起来相同，在循环期间没有任何变化。您已经拥有索引计数器i。将其附加到类名并删除其余的 if 语句
嗨 Gezzasa，我们已经用不同的 CSS 类更新了代码。你能重新检查一下吗？
你的意思是它不起作用。你也可以添加你的CSS吗？您可以在循环中用i 索引计数器替换的数字。在我看来，您当前的循环有点多余。
所以，问题可能出在您的样式上。你想达到什么目标？最终产品应该是什么样子？
@Adarsh 您是否考虑过使用CSS grid 代替margin 进行定位？我想你会发现这是一种更好的定位方式。

标签： c# html css asp.net-mvc razor

【解决方案1】：

我会使用计数器：

@{
  int counter = 1;                                         @* set a counter *@
  foreach (var a in Model.publicShowModelProfileForUI)
  {
        <div class="hoverchilddiv bg-img@counter">         @* use the counter for your class *@
            <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>

      counter++;                                             @* increment the counter *@
  }
}

【讨论】：

使用for循环不是更好吗？那么你就不需要额外的变量了。
不，因为您只是将 var 放入 for 循环中，然后您必须进行额外的计算，例如 i+1，因为根据索引，循环将为 0，然后您必须访问每个项目都使用a[i]，这不像使用实际对象那样好维护