Question

我正在使用jQuery创建一个轮播，并且如果你单独编写每个图像，我发现了一些非常简单的代码来实现它，但是我试图使用foreach循环来实现它。问题是，旋转木马中的第一个div需要类＆＃34; item-active＆＃34;其余的需要课程＆＃34; item＆＃34; （见：http://www.bootply.com/94444）

这是我到目前为止所处的位置：

<div class="row" style="background-color: #dfdfdf; padding-top: 50px;">

    @if (Model.CDSContent != null) { foreach (var item in Model.CDSContent) {
    <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4">
                        <a href="/service/@item[" ceid "]"><img src="@Html.Raw(item[" serviceimage "])" class="img-responsive"></a>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>

    } }

</div>

不太确定从哪里开始。

Answer 1

有几种方法可以做到这一点。

使用for循环
设置布尔标志
使用Linq获取list.First（）然后foreach over list.Skip（1）

Answer 2

我建议使用for循环，而不是foreach循环。像这样：

for(int i=0; i < Model.CDSContent.Count(); i++)
                {
                    <div class="col-md-6 col-md-offset-3">
                        <div class="carousel slide" id="myCarousel">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="col-md-4"><a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a></div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
                    </div>

                }

然后只需使用if语句检查i==0（如果它是循环中的第一项），如果是，则将其类设置为活动项，如果不是，将其类设置为item：

@if(i == 0)
{
        <div class="item active">
              <div class="col-md-4">
                   <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a>
              </div>
        </div>
}
else
{
    <div class="item">
          <div class="col-md-4">
               <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a>
          </div>
    </div>
}

Answer 3

这一定就够了;

写 @（item.Equals（Model.CDSContent.First（））？＆＃34;有效＆＃34;：＆＃34;＆＃34;）而不是有效

... <div class="carousel-inner"> <div class="item @(item.Equals(Model.CDSContent.First())?"active":"")"> ....

使用MVC5在Foreach循环中创建不同的类

3 个答案: