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

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

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

谢谢

Answer 1

问题出在您的 jQuery 上，它以 ID 为“test”的元素为目标，但在每次迭代中您都输出相同的 ID，因此 jQuery 无法检测到您要以哪个元素为目标。您实际上不需要任何 javascript。

在您的代码中，您根据元素的年份计算奇数或偶数，实际上您可以为此在迭代器上使用一个计数。如果您真的想使用年份，只需替换

@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++;
    }