在 foreach 循环中添加活动类答案

【问题标题】：Add class active in foreach loop在 foreach 循环中添加活动类
【发布时间】：2018-03-11 16:54:39
【问题描述】：

我很清楚她。但现在我想让它动态化。

<div class="carousel-inner">
    <div class="item active">
        <div class="col-sm-6">
            <img src="images/home/girl1.jpg" class="girl img-responsive" 
            alt="" />

            <img src="images/home/pricing.png"  class="pricing" alt="" />
        </div>                          
    </div>          
</div>

我尝试了动态代码：

<div class="carousel-inner">

   @foreach (var item in slides)
    {
        <div class="item {{ $loop->first ?  'active' : '' }}">
            <div class="col-sm-6">
                 <img src="@item.Image" class="girl img-responsive" alt="" 
                 />
                 <img src="~/Assets/images/home/pricing.png" class="pricing" 
                 alt="" />
            </div>
        </div>
    }

但它没有说话。如何设置<div class="item active"？

【问题讨论】：

你有没有尝试过这样的事情：@if($loop->first) <div class="item active"> @else <div class="item"> @endif

标签： css asp.net-mvc

【解决方案1】：

试试：

   @foreach (var obj in slides.Select((item, index) => new {item, index})
    {
        <div class='@(obj.index==0?"item active":"item")'>
            <div class="col-sm-6">
                 <img src="@obj.item.Image" class="girl img-responsive" alt="" 
                 />
                 <img src="~/Assets/images/home/pricing.png" class="pricing" 
                 alt="" />
            </div>
        </div>
    }

【讨论】：

【解决方案2】：

您始终可以使用“@”而不是 {{}}（这看起来像 Angular）来访问 C# 代码。这应该可以帮助您：

@foreach (var item in slides)
{
    @{
        string class = "item"
        if(item == slides.First())
        {
            class += " active"
        }
    }
    <div class="@class">
        <div class="col-sm-6">
            <img src="@item.Image" class="girl img-responsive" alt="" />
            <img src="~/Assets/images/home/pricing.png" class="pricing" alt="" />
        </div>
    </div>
}

【讨论】：