Question

您好我们正在寻找将不同的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);
}

Answer 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 *@
  }
}

无法在foreach循环中为每个数据集应用不同的CSS类

1 个答案: