Question

我有剃刀看她。但现在我想让它充满活力。

<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"？

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

Answer 2

您始终可以使用＆＃39; @＆＃39;来访问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>
}

在foreach循环中添加活动类

2 个答案: