Question

有人可以帮助我完成这项任务

@foreach (var item in Model.Premium)
{
    <div class="col-md-2">
        <div id="test" class="panel">
            <div class="panel-heading text-center">
                 <h1 class="panel-title" style="font-size:x-large;font-weight:400">
                      @item.year
                 </h1>
             </div>
             <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
                 $@item.price
             </div>
         </div>
     </div>

     <script>
         var year = @item.cy_year;
         var OddOrEven = year % 2;

         if (OddOrEven = 0) {
              $('#test').addClass("panel-default");
         }
         else 
         {
              $('#test').addClass("panel-info");
         }
     </script>
}

在此代码中，我从表中获取年份和价格列表。我想要的是每年在引导板中添加它的价格，然后检查面板是奇数还是偶数。对于所有奇数面板，我想添加引导类"panel-default"，并且对于我想要添加引导类"panel-info"的所有偶数面板。

由于

Answer 1

问题在于你的jQuery，它的目标是一个带有ID＆＃39; test＆＃39;但是在每次迭代中，您输出相同的ID，因此jQuery无法检测您要定位的元素。你实际上并不需要任何javascript。

在您的代码中，您根据项目的年份计算奇数或偶数，实际上您只需对迭代器使用计数即可。如果您确实想要使用Year，只需替换

@Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")

带

@Html.Raw(@item.cy_year % 2 == 0 ? "panel-default" : "panel-info")

继承人代码：

@{int i = 0;}
    @foreach (var item in Model.Premium)
    {
        <div class="col-md-2">
            <div class="panel @Html.Raw(i % 2 == 0 ? "panel-default" : "panel-info")">
                <div class="panel-heading text-center">
                    <h1 class="panel-title" style="font-size: x-large; font-weight: 400">@item.year</h1>
                </div>
                <div class="panel-body text-center" style="font-size: x-large; font-weight: 300"> $@item.price</div>
            </div>
        </div>
        i++;
    }

Answer 2

我建议像这样做。而是每个项目的JavaScript。

@foreach (var item in Model.Premium)
{
<div class="col-md-2">
  <div id="test" class="panel @((item.cy_year % 2 == 0) ? "panel-default" : "panel-info")">
    <div class="panel-heading text-center">
      <h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1>
    </div>
    <div class="panel-body text-center" style="font-size:x-large;font-weight:300"> 
    $@item.price
    </div>
  </div>
</div>
}

Answer 3

所以有几个问题

您在for循环中声明了一个id字段，它将给出多个标签具有相同的ID。
在底部的if语句中，您正在进行分配而不是比较

以下是你如何在剃刀中做到这一点

@foreach (var item in Model.Premium)
{
var classForDiv = "panel-info";
if(item.cy_year % 2 == 0) {
    classForDiv = "panel-default";
}
<div class="col-md-2">
<div id="test" class="panel @classForDiv"> // Need to change the id to be unique for each iteration
 <div class="panel-heading text-center">
<h1 class="panel-title" style="font-size:x-large;font-weight:400">@item.year</h1></div>
<div class="panel-body text-center" style="font-size:x-large;font-weight:300"> $@item.price</div>
</div>
</div>
}

在MVC中使用jquery更改foreach循环中的CSS类

3 个答案: