Невозможно применить разные классы CSS к каждому набору данных в цикле foreach.

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 каждому набору данных, но мы не получили ожидаемый результат.

Ниже приведеныКлассы CSS для приведенного выше HTML-кода

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